更改 Bootstrap Material 主题的颜色答案

【问题标题】：Changing the colors of Bootstrap Material theme更改 Bootstrap Material 主题的颜色
【发布时间】：2016-08-31 11:35:32
【问题描述】：

我正在开发一个应用程序，我想在其中使用更深橙色的颜色样式，并尝试从 sass 版本的文件中覆盖某些变量，但是当我使用 gulp 编译它时，它并没有改变。另一件奇怪的事情是，当我使用 sass 版本时，默认颜色是蓝色/靛蓝，但是当只使用来自 github repo 的预编译 css 时，它使用青色样式。我的 app.scss 文件中有以下内容

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
@import "vendor/material/ripples";

我试图通过添加我想要更改的变量来覆盖变量，例如链接颜色，但没有运气

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
$link-color: $red !default;
@import "vendor/material/ripples";

有谁知道如何改变主题的整体颜色风格？

【问题讨论】：

标签： css twitter-bootstrap sass material-design bootstrap-material-design

【解决方案1】：

在更改 Bootstrap 样式/主题时，我发现浏览器的 Inspector 非常有用。

在 Firefox 中：Tools > Web Developer > Inspector
在 Safari 中：开发 > 显示 Web 检查器

在页面中选择一个元素，它会按层次顺序显示所有应用于它的 CSS 样式（即正确应用的样式，但被另一个优先的样式覆盖）。通常，某些东西正在被我没有意识到的元素修改，或者被称为与我想象的不同的东西。

【讨论】：

【解决方案2】：

为了更改 Bootstrap 变量的默认值，您需要在实际导入 bootstrap 部分变量之前定义它们 - 确保对其应用 !default 标志，这样它就不会被覆盖。

【讨论】：

【解决方案3】：

问题可能是 SASS 部分应以下划线开头，否则文件将编译为 CSS 文件。

由于vendor/bootstrap-material/bootstrap-material-design 不以下划线开头，它可能在编译成 CSS 时没有考虑@import 之后定义的变量。

我还想提一下，到目前为止（直到下一个支持 Bootstrap4 的主要版本），Bootstrap Material Design 项目的 sass 文件是从 LESS 文件中自动生成的。因此，如果下划线前缀没有帮助，你会更好地修改 LESS 文件并编译 CSS 或生成 SASS 文件。

【讨论】：