Question

我正在开发一个应用程序，我想使用更深橙色的颜色样式，并尝试覆盖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";

有谁知道如何更改主题的整体颜色样式？

Answer 1

为了更改Bootstrap变量的默认值，您需要在实际导入bootstrap partial之前定义它们 - 确保将！default标记应用于它，因此不能覆盖它。

Answer 2

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

由于vendor/bootstrap-material/bootstrap-material-design并非以下划线开头，因此可能会将其编译为CSS而不考虑@import之后定义的变量。

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

Answer 3

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

在Firefox中：工具＆gt; Web开发人员＆gt;检查员
在Safari中：开发＆gt;显示Web Inspector

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

更改Bootstrap Material主题的颜色

3 个答案: