如何在 Meteor 中覆盖 Bootstrap 样式？答案

【问题标题】：How to override Bootstrap styles in Meteor?如何在 Meteor 中覆盖 Bootstrap 样式？
【发布时间】：2016-05-21 22:11:15
【问题描述】：

我正在使用带有 Meteor 的 twbs bootstrap 3.3.6 并尝试设置 <fieldset> 的样式。

但是，当我使用 Chrome 检查器时，它说样式来自 bootstrap.css，即使我尝试使用特定于类和特定于 id 的 css。

正如一些答案所建议的，我的样式表位于应用程序根目录中。

我对流星和 css 很陌生，所以我可能会犯一个新手错误。

否则，覆盖引导 css 设置的最佳做法是什么？

【问题讨论】：

【解决方案1】：

这似乎是 Meteor 中的一个常见问题，因为他们的构建将合并的样式表注入到 html <header> 的顶部而不是底部的方式。有一个 merged PR 看起来它将在 1.6.2 中可用，它允许您在您希望注入合并的 css 的 <head> 中的任何位置放置一个伪标记。

示例：1.6.2 中的建议可用性 - PR 已合并

<head>
    <link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
    <meteor-bundled-css/>
</head>

一旦合并的 PR 包含在下一个版本中，这将起作用。

在那之前……

解决方案 1：如果您使用的是引导 LESS 或 SCSS 文件，您可以将其导入您的 client/main.less 或 client/main.scss 文件，然后在此之后导入您的覆盖文件。看起来您使用的是 pre=compiled css，所以转到解决方案 3。

解决方案 2：在行尾使用 !important...不好不推荐的做法。如果你使用重要的，你会打破级联。

解决方案 3：将您的第三方库覆盖文件放在您的公用文件夹中，并手动将 <link> 它放在您头脑中的引导程序 <link> 下方。 我现在建议这个。

【讨论】：

【解决方案2】：

一般来说，如果你想覆盖 css，你应该把你的 css 文件放在所有其他文件之后，比如 bootstrap css，因为 css 从上到下开始，所以底线是要执行的，例如：

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />

您也可以在每条 css 行的末尾添加 !important 以使该样式具有最高优先级，无论行索引如何，例如：

.someclass {
    color: red!important;
}

【讨论】：

【解决方案3】：

您可以在 css 中覆盖同一类的特定属性...

.btn {
  background-color: #fff !important;
}

...创建一个继承映射，使其仅适用于另一个特定元素内的元素...

div.classForSpecificContainer btn {
  background-color: #fff !important;
}

或指定您自己的类并将其添加到相关元素中

myOverrideClass {
  background-color: #fff !important;
}

.. 重要的部分是您使用!important; 来防止引导程序覆盖它。即使 CSS 文件以错误的顺序加载，这通常也会解决问题，但并非总是如此。我养成了在我的 CSS 文件前面加上 z- 前缀的习惯，以确保如果我使用像 Meteor 这样合并和压缩 CSS 的东西，它们会最后加载。

【讨论】：