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

Question

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

Answer 1

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

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

Answer 2

我对我目前的解决方案不是特别满意，但它只是作为我当前 Angular 实现 Bootstrap 4."override" 变量的一种方式。

在您的项目中创建一个 _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";

Answer 3

我注意到你的问题here, here and here:

☐ Consider implementing a _custom.scss for easier, built-in variable overrides?

所以因为你的 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 [supposedly] ships with a _custom.scss file for easy overriding of default variables in /scss/_variables.scss. Copy and paste relevant lines from there into the _custom.scss file, modify the values, and recompile your Sass to change our default values. Be sure to remove the !default flag from override values.

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

How to create _custom.scss to override variable in Bootstrap 4 alpha 6

frontend

sass

web-site-project

gulp

bootstrap-4