Question

我觉得应该使用捆绑将一堆文件分组到浏览器中，这些文件可以一起使用。这意味着例如我的root风格，我想做类似以下的事情：

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);

但是这似乎与custom transform technique for bundling less files没有很好的协作，因为它看起来像将所有文件预先捆绑到单个css文件中，然后再将其传递给LessTransform。据我所知，只有将所有较少的文件捆绑在一起时，此方法才有效。

有没有办法让bundle在同一个bundle中同时允许less和css文件？

Answer 1

是的，你是对的，变换器在将所有CSS / LESS内容传递给转换器之前将其连接起来。也就是说，转换器不应该阻塞LESS和CSS的存在，因为你总是可以在LESS样式表中包含标准CSS。

问题似乎是您正在使用已与变换器关联的StyleBundle对象。尝试使用通用Bundle，就像我在配置中一样，如下所示：

var customStyles = new Bundle("~/bundle/style/css")
                       .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

至于你自己的答案，bootstrap.css文件的问题不是LESS变换器不喜欢它，但可能是@imports的路径问题，请确保你的LESS变换器使用某些东西来确保它解决任何依赖样式表的正确路径。

Answer 2

我相信所有CSS都是有效的（但并非所有LESS都是有效的CSS）

因此，将LessTransform应用于您的bootstrap css文件应该没有任何区别。

它仍会将所有文件捆绑到一个css文件中以传递给浏览器。

设计时期间可能只有性能问题。

仍会生成正确的输出，缓存可以防止任何运行时性能问题。

Answer 3

我知道这是一个很老的帖子，但我注意到一些可能对某人有用的奇怪......

我发现Bundle对象在css文件名中不喜欢连字符，当时还包含较少的文件。即：

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jquery-ui.1.9.2.custom.css"
            );

对我不起作用，但以下情况（更改为jqueryui文件名）：

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jqueryui.1.9.2.custom.css"
            );

因此，将文件名从"~/Content/bootstrap-responsive.css"更改为"~/Content/bootstrapresponsive.css"可以很好地为您解决问题。

Answer 4

我对此有了更多的了解并尝试使用Bundle而不是StyleBundle，但仍然存在问题。我认为这个问题特别与bootstrap.css文件有关，该文件有一些不太喜欢的语法。

将less和css文件捆绑在一起

4 个答案: