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

【问题标题】：Bootstrap Customization SASS Variables Override Not WorkingBootstrap 自定义 SASS 变量覆盖不起作用
【发布时间】：2018-01-30 03:52:46
【问题描述】：

尝试自定义 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 忽略。我做错了什么？

【问题讨论】：

标签： sass bootstrap-4

【解决方案1】：

但是您正在导入 css 文件。

只需下载 sass 源代码，将其导入，然后您就可以编辑引导变量。

【讨论】：

【解决方案2】：

您需要导入 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

【讨论】：