Bootstrap自定义SASS变量覆盖不起作用

时间:2017-08-22 01:59:02

标签: sass bootstrap-4

尝试自定义Bootstrap,如下所示:https://getbootstrap.com/docs/4.0/getting-started/options/

这是我的main.scss文件:

@charset 'utf-8';

@import 'variables';
@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
@import 'layouts';

在变量文件中,我有:

$font-family-base: 'Montserrat', sans-serif;
$body-color: red;

但是,Bootstrap会忽略这些变量。我做错了什么?

2 个答案:

答案 0 :(得分:1)

但是你要导入css文件。

只需下载sass源,导入它然后就可以编辑bootstrap变量。

答案 1 :(得分:0)

在更改任何变量后,您需要导入 bootstrap / scss 以覆盖默认变量..

@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700');

$font-family-base: 'Montserrat', sans-serif; 
$body-color: red;

@import 'bootstrap';

https://www.codeply.com/go/ZIRPuQ7E3x

另见:How to extend/modify (customize) Bootstrap 4 with SASS