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

Question

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

这很好用，但我们注意到，当我们使用 @import CSS at-rule 在 LESS 中将它们重要时，一些 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 扩展名）。这是“正常”的 CSS 导入，CSS 导入需要额外的 HTTP 请求才能加载。

您可以使用inline 选项：

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

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