BundleTransformer: CSS没有捆绑在@import指令中

Question

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

这很好，但是我们注意到一些CSS文件并不与我们的更少的文件捆绑在一起，当我们用@import CSS在规则中对它们进行更少的重视时。

在根级文件中的示例：

/* 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文件并不与根级文件捆绑在一起。

​

​

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

Answer 1

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

在您的代码中，@import "../themes/base/tabs.css";编译成@import "../themes/base/tabs.css"; (由于.css扩展)。这是一个“正常”的CSS导入，CSS导入需要额外的HTTP请求来加载。

您可以使用inline选项：

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

上述代码将从tabs.css插入到您的项目文件中，而无需处理它。