将less和css文件捆绑在一起

我觉得捆绑应该被用来将你一起使用的一堆文件分组到浏览器中。 这意味着例如我的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文件?

是的,你是对的,变换器在将所有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变换器使用某些东西来确保它解析正确的路径到任何依赖样式表。

我相信所有的CSS都是有效的(但并非所有的LESS都是有效的CSS)

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

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

设计时可能只存在性能问题。

仍将生成正确的输出,缓存将防止任何运行时性能问题。

我知道这是一个很老的post,但我注意到一些可能对某人有用的奇怪……

我发现当包含较少的文件时, 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"可以很好地为您排序问题。

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