如何创建 _custom.scss 以覆盖 Bootstrap 4 alpha 6 中的变量答案

【问题标题】：How to create _custom.scss to override variable in Bootstrap 4 alpha 6如何创建 _custom.scss 以覆盖 Bootstrap 4 alpha 6 中的变量
【发布时间】：2017-09-19 19:27:03
【问题描述】：

我正在尝试自定义 Bootstrap 4 alpha 6 主题。我想将设置从 _variable.scss 文件复制到 _custom.scss 以覆盖。但我没有在源代码中找到 _custom.scss 文件。如何在我的项目中添加这个 _custom.scss 文件？

【问题讨论】：

您需要创建文件并在文件中添加自定义变量。
如果您接受答案，我可以将this 标记为重复。
bootstrap-4.3.1 在尝试了 _custom.scss 一段时间后，我发现编辑 _variables.scss 更容易。引导更新后合并新旧版本应该不难。无论如何，您都必须编辑 bootstrap.scss（添加 @import "custom"; 如果使用 _custom.scss）。

标签： sass gulp frontend bootstrap-4 web-site-project

【解决方案1】：

我对我当前的解决方案并不特别满意，但它只是作为一种在我当前的 Bootstrap 4 Angular 实现中“覆盖”变量的方式。

在您的项目中创建一个 _custom.scss 文件
在项目中新建bootstrap.scss
- 将 bootstrap.scss 的内容从 Bootstrap 复制到新文件（例如，node_modules\bootstrap\scss\bootstrap.scss）
- 使用相对于新 bootstrap.scss 文件的正确文件位置更新每个导入
- 在变量和 mixins 之间为您的新自定义文件添加导入
在您导入 Bootstrap 的位置更新以引用新创建的 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（我在 Bootstrap 之外的任何其他样式的位置）：

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

【讨论】：

【解决方案2】：

我注意到您的问题here、here 和here：

☐ 考虑实施_custom.scss 以便更轻松地覆盖内置变量？

因此，由于您的 Bootstrap 4 未附带 _custom.scss 文件，因此您只需重新创建 bootstrap/scss/_custom.scss。

然后将bootstrap/scss/bootstrap.scss 编辑为应有的内容：

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

那就关注Customising variables

Bootstrap 4 [据说] 附带了一个 _custom.scss 文件，用于轻松覆盖 /scss/_variables.scss 中的默认变量。从那里复制相关行并将其粘贴到 _custom.scss 文件中，修改值，然后重新编译您的 Sass 以更改我们的默认值。 请务必从覆盖值中删除 !default 标志。

【讨论】：

【解决方案3】：

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

如果您查看git repo for Boostrap 4 alpha 6，则包含_custom.scss。

【讨论】：

引用了一个不特定于 Bootstrap 4 alpha 6 的位置（已更改）