2

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

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

4

3 回答 3

0

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

于 2016-05-05T22:12:00.603 回答
0

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

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

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

于 2016-05-11T17:01:22.753 回答
-3

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

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

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

于 2016-05-05T15:52:02.083 回答