2017-06-12 79 views
0

我正在做一个教程来学习Bootstrap 4(alpha 6)。我需要从bootstrap自定义原始的css配置。我的custom.scss文件不考虑Bootstrap 4 Alpha 6

为此,我已经修改了_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"; 

有没有人对为什么这是行不通的线索?

+0

[Bootstrap使用SCSS'!default's](https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean)设置变量。尝试导入'custom' _before_'变量'。 – Blazemonger

+1

你可以发布你的变量文件吗? – dennispreston

+0

今天晚上我会更新我的帖子。但变量文件是由bootstrap提供的默认值,我没有改变任何东西。 –

回答

0

好的,我找到了答案。

这是对萨斯如何工作的误解。我认为这些变量就像在java中:一个参考。但它不是这里的情况在上海社会科学院所以你必须使用这样的颜色也变重新定义组件:

$green:red; 

$brand-success:$green; 
0

我有同样的问题,我_custom.scss并不似乎在编译时被工作,但实际上它是一个非常简单的修复程序。

复制_variables.scss内容并粘贴到_custom.scss文件中,并从整个文件中简单地删除所有!default;

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

$font-size-h1: 2.5rem;

将解决这个问题。