css - bundle 变压器 : CSS not bundled through @import directive

Question

我们在 ASP.NET MVC 元素中使用 BundleTransformer 来 bundle 我们的样式文件。

这很好用，但是我们注意到当我们使用 @import CSS at 规则在 LESS 中重要它们时，一些 CSS 文件没有与我们的 LESS 文件 bundle 在一起。

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 文件 bundle 在一起。

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

Answer 1

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

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

您可以使用内联选项:

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

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