更改 Bootstrap Material 主题的颜色

Question

我正在开发一个应用程序，我想在其中使用更深的橙色颜色样式，并尝试覆盖 sass 版本文件中的某些变量，但是当我使用 gulp 它不会改变。另一件奇怪的事情是，当我使用 sass 版本时，默认颜色是 blue/indigo，但是当仅使用 github 存储库中的预编译 css 时，它使用蓝绿色风格。我的 app.scss 文件

中有以下内容

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

我试图通过添加我想更改的变量来覆盖变量，例如 link-color，但没有成功

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

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

Answer 1

在更改Bootstrapstyles/themes时，我发现浏览器的检查器非常有用。

在 Firefox 中：工具 > Web 开发人员 > 检查器
在 Safari 中：开发 > 显示 Web 检查器

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

Answer 2

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

Answer 3

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

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

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

更改 Bootstrap Material 主题的颜色

Changing the colors of Bootstrap Material theme

css

twitter-bootstrap

sass

material-design

bootstrap-material-design