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

Question

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

这很好用，但我们注意到当我们使用 @import CSS at 规则在 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 扩展名）。这是 "normal" CSS 导入，CSS 导入需要额外的 HTTP 请求才能加载。

您可以使用 inline 选项：

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

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

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

BundleTransformer: CSS not bundled through @import directive

css

asp.net-mvc

bundle

less