如何创建_custom.scss覆盖变量在引导4阿尔法6

问题描述：

我想定制引导4阿尔法6的主题。我想复制从_variable.scss文件设置_custom.scss覆盖。但是我没有在源代码中找到_custom.scss文件。如何在我的项目中添加_custom.scss文件？如何创建_custom.scss覆盖变量在引导4阿尔法6

您需要创建文件，并添加文件里面自定义变量。 –

如果您接受答案，那么我可以将[this]（https://*.com/questions/46505841/how-to-override-bootstrap-variables-in-sass/47486673#47486673）标记为重复项。 – Leo

答

我注意您的问题here，here和here：

☐考虑实施更容易一_custom.scss，内置变量替换？

所以因为你的引导4没有用_custom.scss文件发货，您只需要重新创建bootstrap/scss/_custom.scss。

然后编辑bootstrap/scss/bootstrap.scss什么它应该是：

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

引导4按说]附带一个_custom.scss文件中/scss/_variables.scss默认变量容易压倒一切。将相关行复制并粘贴到_custom.scss文件中，修改这些值并重新编译Sass以更改我们的默认值。 务必从覆盖值中删除!default标志。

答

您确定您使用的是Bootstrap 4 alpha 6的源代码版本吗？或者没有删除_custom.scss意外？

如果你看看git repo for Boostrap 4 alpha 6，包括_custom.scss。

引用不是特定于Bootstrap 4 alpha 6的位置（已更改） –

答

我对自己目前的解决方案不是特别高兴，但它只是工作的一种方式在我目前的角度实现引导4.

来“覆盖”变量创建一个_custom.scss您的文件项目
项目
- 复制bootstrap.scss从引导内容到新的文件（例如，node_modules \引导\ SCSS \ bootstrap.scss）
- 更新每创建一个新的bootstrap.scss M端口相对于新bootstrap.scss文件
- 正确的文件位置添加一个导入的变量和混入更新之间
新的自定义文件，无论你导入引导引用新创建的文件bootstrap.scss

样品实施：
文件夹结构：

app 
└── styles 
    ├── bootstrap.scss 
    └── _custom.scss

个

_custom.scss：

// For example, change links to be yellow 
$link-color: yellow;

bootstrap.scss包含：

@import "~bootstrap/scss/variables"; 
@import "custom"; 
@import "~bootstrap/scss/mixins"; 
//etc.

app.component.scss（我的位置任何额外的风格外引导的）：

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";