Bootstrap 4 alpha 6 中没有考虑我的 custom.scss 文件答案

【问题标题】：My custom.scss file is not taken into account in Bootstrap 4 alpha 6Bootstrap 4 alpha 6 中没有考虑我的 custom.scss 文件
【发布时间】：2017-11-14 12:19:56
【问题描述】：

我正在做一个学习 Bootstrap 4 (alpha 6) 的教程。我需要从引导程序自定义原始 css 配置。

为此我修改了_custom.scss：

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override 
default values
// without modifying source files.
$green:red;

然后我重新编译 bootstrap.scss 文件（我正在使用 prepros），当我重新加载页面时，没有任何改变。当我查看生成的 bootstrap.css 文件时，颜色仍然是 bootstrap 主题中的默认绿色。

当我直接修改 _variables.scss 文件时，它可以完美运行。

在我的 bootstrap.scss 文件中，_custom.scss 文件是在 _variables.scss 之后导入的：

// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";

有人知道为什么这不起作用吗？

【问题讨论】：

Bootstrap uses SCSS !defaults 设置变量。尝试导入custom 之前 variables.
你能发布你的变量文件吗？
今晚我会更新我的帖子。但是变量文件是bootstrap默认提供的，我什么都没改。

标签： css html sass bootstrap-4

【解决方案1】：

好的，我找到了答案。

这是对 Sass 工作原理的误解。我认为这些变量就像在 java 中一样：引用。但在 sass 中并非如此，因此您还必须使用 color 变量重新定义组件，如下所示：

$green:red;

$brand-success:$green;

【讨论】：

【解决方案2】：

我遇到了同样的问题，我的 _custom.scss 在编译时似乎没有工作，但实际上它是一个非常简单的修复。

复制 _variables.scss 内容并粘贴到 _custom.scss 文件中，然后从整个文件中删除所有 !default;。

$font-size-h1: 2.5rem !default;

到

$font-size-h1: 2.5rem;

将解决问题。

【讨论】：