BundleTransformer：未通过@import指令捆绑的CSS

Question

我们正在使用ASP.NET MVC项目中的BundleTransformer来捆绑我们的样式文件。

这很好用，但我们注意到当我们在LESS中使用@import CSS at-rule时，一些CSS文件没有与我们的LESS文件捆绑在一起。

我们的根LESS文件中的示例：

/* Import core LESS files */
@import "../core.less";

/* Import jQuery UI stuff*/
@import "../themes/base/core.css";
@import "../themes/base/resizable.css";
@import "../themes/base/accordion.css";
@import "../themes/base/tabs.css";

/* Import more LESS files */
@import "../morestyles.less";

如果我们查看从Chrome下载的文件，很明显CSS文件未与根LESS文件捆绑在一起。

当然，我们可以简单地将这些CSS文件包含在BundleConfig中并删除@import次调用，但我只是想知道是否有办法将它们捆绑在一起。

Answer 1

您应该阅读http://lesscss.org/features/#import-options。

在您的代码中@import "../themes/base/tabs.css";汇编为@import "../themes/base/tabs.css";（由于.css扩展名）。这是一个正常的＆＃34; CSS导入，CSS导入需要额外的HTTP请求才能加载。

您可以使用inline选项：

@import (inline) "../themes/base/tabs.css";

上面将tabs.css中的代码内联到您的项目文件中而不进行处理。