即使使用 @import 也绑定 css答案

【问题标题】：Bundling css even if using @import即使使用 @import 也绑定 css
【发布时间】：2016-09-07 19:44:09
【问题描述】：

我正在用 C# 和 Asp.Net MVC 开发一个应用程序。我有各种 css 文件，其中一个名为 base.css，然后我使用 @import 规则将其导入其他 css 文件：

@import url('base.css');

然后我捆绑我的 css 文件以将它们最小化为：

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
                  ... more css files

所以我的问题是我是否必须捆绑base.css，即使我将它导入到不同的 css 中？因为如果我不捆绑它，那么样式就不能按要求工作。

【问题讨论】：

这可能不是您想听到的答案，但为什么不在您的捆绑包中包含base.css。众所周知，导入会导致页面速度问题。捆绑后，您可以删除 @import
@AshleyMedway 这可能是我要走的路线，但我只是想知道为什么它不起作用，@krillgar 的回答是有道理的
是的，这基本上就是答案，我要补充一点，您可以通过将导入文件与您的包放在“相同”位置（虚拟）或使用绝对 url 来使其“工作”
如果您将导入规则更新为：@import url('/Content/base.css');，那么在捆绑其他样式后它将继续工作，但最好完全删除该规则并将其包含在您的捆绑包中 - 那您可以利用捆绑服务中的其他优化（缩小等）的方式。

标签： c# html css asp.net-mvc

【解决方案1】：

因为 MVC Bundler 在可能不同的位置创建了一个全新的文件（请参阅您的包名称中的完整路径），这些 import 语句的位置现在变得不准确。

您可以做的是创建一个单独的 CSS 文件（或在您的 _Layout 页面上仅包含那些 import 语句的静态声明），并将其包含在任何捆绑包之外。

【讨论】：