css - Bootstrap 是否导入了两次？

Question

我是否通过在我的 Site.less 文件中导入 bootstrap.less 来包含整个 Bootstrap css？我正在覆盖少量的 Bootstrap 类。

~/Content/less/Site.less;通过导入 Bootstrap 文件，输出 (Site.css) 现在是否包含所有 Bootstrap css？

@import "less/bootstrap.less";

.btn {
    background-color: red;
}

.btn-lrg {
      font-size: ...;
}

在我的 HTML 中，我是这样导入的:

<link href="/Content/bootstrap/bootstrap.less" rel="stylesheet"/> <!-- Is this redundant now? -->
<link href="/Content/less/Site.less" rel="stylesheet"/> 

PS:这是覆盖 Bootstrap 类的行业标准方式吗？有更好的方法吗？

Answer 1

是您现在可能应用和覆盖了大量冗余 CSS。检查这一点的最简单方法是查看浏览器中的开发人员工具。他们中的大多数现在都有不错的 CSS 调试器，您会显示覆盖的规则及其源文件吗？

在回答您的第二个问题时，对于如何使用 Bootstrap 并没有真正的“行业标准”。有不同的做法，每种做法都有适合特定情况的不同优点。

您可以像这样覆盖编译后的类，例如已编译的 bootstrap.css 定义了 .btn，然后您稍后会在自己的 CSS 文件中重新定义并覆盖相同的选择器。

您还可以编辑 bootstrap.less，直接修改以适合您的风格。这不太便携，但您最终可以得到更精简的代码。

还有一件事:有一个与性能相关的附带问题需要注意。根据 Less docs ，“不建议在生产环境中使用客户端 Less 编译器。”

事实上，调试起来可能更难。最好使用源映射将 Less 代码预编译到 CSS 中，这样您就可以从浏览器的调试器中找到返回相关 .less 文件的方法:)