Bootstrap 是否导入了两次？答案

【问题标题】：Is Bootstrap imported twice?Bootstrap 是否导入了两次？
【发布时间】：2015-12-07 11:20:36
【问题描述】：

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

~/Content/less/Site.less;通过导入引导文件，输出 (Site.css) 现在是否包含所有引导 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：这是覆盖引导类的行业标准方式吗？有没有更好的方法来做到这一点？

【问题讨论】：

是的，我会说你是。您可以通过查看生成的文件自己检查，不是吗？

标签： css twitter-bootstrap less

【解决方案1】：

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

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

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

您也可以编辑bootstrap.less，直接修改以适合您的风格。这不太可移植，但您可以得到更精简的代码。

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

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

【讨论】：