将less和css文件捆绑在一起

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);    

但是， 对于捆绑较少文件的自定义转换技术来说，这似乎并不能很好地工作，因为它看起来像将所有文件预先捆绑到单个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文件有关，该文件有一些不太喜欢的语法。