Sass 难以创建 Bootstrap 4 的自定义版本

Question

我正在尝试创建 Bootstrap 4 的自定义版本。除其他外，我想将默认颜色（“主要”）从 Bootstrap 蓝色更改为其他颜色。

如果我直接编辑 Bootstrap 源文件，并将我的新颜色添加到标准颜色列表中，并将“主要”设置为我的新颜色，然后重新构建，一切都像我一样工作会期望，并且所有组件都选择我的新颜色作为它们的默认颜色，并且它正确地计算更亮和更暗的变体。

但我知道这并不是真正正确的方法。所以我尝试使用未触及的 Bootstrap 源文件，并创建了一个像这样的 custom.scss 文件

@import "functions"; 
@import "variables";
@import "mixins";

$newcolor: #00a89c;

$colors: (
    "newcolor": $newcolor
);

$primary: $newcolor;

$theme-colors: (
    "primary": $primary
);

@import "bootstrap";

当我重建时，结果不同。已编译的 CSS 包含新颜色，并且一些组件（例如 btn-primary、badge-primary、bg-primary）已将其拾取，但其他元素（例如 btn-link）已还原到 Bootstrap 蓝色。我查看了Bootstrap来源，btn-link设置为$link-color，而$link-color来自theme-color("primary")，所以我想我一定是按错误的顺序做某事，或者误解了优先顺序。

谁能指出我哪里出错了，并告诉我如何让我的新颜色在所有引用“主要”的地方使用？

Answer 1

你在最后使用 @import "bootstrap" 部分正确。

当 @import bootstrap.scss 已经包含它们的 @imports 时，@importing 函数、变量和 mixins 是不正确的。

这里发生的本质是，文件顶部的 @import "mixins" 只能看到它之前的内容（默认函数和变量文件），那是在您进一步提供自己的值之前。

custom.scss

$newcolor: #00a89c;

$colors: (
    "newcolor": $newcolor
);

$primary: $newcolor;

$theme-colors: (
    "primary": $primary
);

@import "bootstrap";

Sass 难以创建 Bootstrap 4 的自定义版本

Sass difficulty creating custom build of Bootstrap 4

css

customization

sass

bootstrap-4