覆盖 Bootstrap css 的最有效方法是什么？答案

【问题标题】：What is the most efficient way to override Bootstrap css?覆盖 Bootstrap css 的最有效方法是什么？
【发布时间】：2013-06-23 05:28:33
【问题描述】：

我正在为我的公司使用 Opencart 作为电子商务网站。 Opencart 开发人员正在开发 V2.0，它将合并 Bootstrap 作为默认样式。

我的计划是在我的头文件中的下一行添加一个链接到引导样式表示例的链接下方：

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/override.css" />

我打算使用 LESS 编译成 override.css 并且只更改 Bootstrap 的一小部分以满足我的需要。例如，我计划只包含 bootstrap 中的 variables.less 以及buttons.less 和 layout.less。然后我会将这些修改后的文件编译成 override.css 以获得我的个性化样式。然而，我想得越多，我意识到我需要包含 Bootstrap 中的所有 LESS。这将使我的 override.css 与 bootstrap.css 基本相同（除了我对样式所做的更改）。

这基本上违背了覆盖的目的。有没有办法不需要包含所有引导程序，只需要覆盖我想要的部分？

人们可能想知道为什么我不只是修改 bootstrap.css 文件。我的想法是，如果我确实修改了 bootstrap.css 文件，如果我将来升级（或者如果 Opencart 开发人员升级）引导程序，我的所有更改都将被覆盖。

非常感谢任何建议！

谢谢！

DS-MATT

【问题讨论】：

标签： css twitter-bootstrap less opencart

【解决方案1】：

为什么不给自己保留一个overwrite.css，同时将编译好的bootstrap.css + override.css 呈现给最终用户？这样，您以后就可以轻松地更新您的 bootstrap.css 并轻松地维护自己的覆盖。

【讨论】：

嗨，RR - 如果我这样做，我将失去变量的好处。例如，如果我想更改站点按钮、文本、链接等的颜色。我必须在 CSS 中进行搜索，并在新的 CSS 文件中查找并替换每个实例。这也似乎是多余的和低效的。
这就是您保留override.css 的原因，这样您就不必这样做了。您需要做的就是重新编译文件并将它们上传到生产服务器。