使用其他 Bootstrap 变量覆盖 Bootstrap SCSS 变量

Question

如何最好地覆盖变量？

我发现以下顺序可行：

@import "bootstrap/_functions.scss";

$primary: red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

但是如果我想要使用Bootstrap中的变量怎么办？例如：

@import "bootstrap/_functions.scss";

$primary: $red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

这段代码无法编译，因为$red变量未定义。

我尝试了以下顺序：

@import "bootstrap/_functions.scss";    
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

$primary: $red;

这个可以工作，但只适用于某些元素。例如，bootstap/_variables.scss 包括：

$link-color: $primary !default;

$link-colour变量没有使用覆盖，而是使用默认值。

有什么想法吗？

- user2246968

Answer 1

Bootstrap 5

我认为您需要设置任何其他使用$link-color的变量（例如：$btn-link-color），并将新颜色合并到$theme-colors映射中...

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

$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;

$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": $primary
  )
);

@import "bootstrap";

演示

- Carol Skelly

---

谢谢。我已经尝试过了，但它仍然不能很好地工作。 如果你将鼠标悬停在链接上，你会发现它是蓝色的。所以变量$link-hover-color使用的是原始的$primary变量而不是覆盖后的变量。 - user2246968

所以只需将$link-hover-color也更改即可。 - Carol Skelly

这对我有用，谢谢！ - undefined

Answer 2

我通常使用以下结构，/src/scss/core 是我的自定义 Sass 目录：

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

// 2. Include any default variable overrides here
@import "core/variables"; // Custom theme variables
@import "core/variables-bootstrap"; // Bootstrap variables overrides

// Mixins
@import "../../node_modules/bootstrap/scss/mixins";
@import "core/mixins.scss";

// Bootstrap core
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/tables";
@import "../../node_modules/bootstrap/scss/forms";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/transitions";
@import "../../node_modules/bootstrap/scss/dropdown";
@import "../../node_modules/bootstrap/scss/button-group";
@import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar";
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/accordion";
@import "../../node_modules/bootstrap/scss/breadcrumb";
@import "../../node_modules/bootstrap/scss/pagination";
@import "../../node_modules/bootstrap/scss/badge";
@import "../../node_modules/bootstrap/scss/alert";
@import "../../node_modules/bootstrap/scss/progress";
@import "../../node_modules/bootstrap/scss/list-group";
@import "../../node_modules/bootstrap/scss/close";
@import "../../node_modules/bootstrap/scss/toasts";
@import "../../node_modules/bootstrap/scss/modal";
@import "../../node_modules/bootstrap/scss/tooltip";
@import "../../node_modules/bootstrap/scss/popover";
@import "../../node_modules/bootstrap/scss/carousel";
@import "../../node_modules/bootstrap/scss/spinners";
@import "../../node_modules/bootstrap/scss/offcanvas";
@import "../../node_modules/bootstrap/scss/placeholders";

// Helpers
@import "../../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../../node_modules/bootstrap/scss/utilities/api";

这个结构对于我来说可以使用变量覆盖/扩展，但正如Zim所说，你需要覆盖$link-hover-color，因为它的默认值是在你定义自定义$primary颜色之前设置的（至少这是我对!default标志的理解）。

$primary: $red;
$link-color: $primary;
$link-hover-color: shift-color($link-color, $link-shade-percentage);

- Tom James

---

这是对我有效的方法。使用这种风格的另一个优点是，您可以注释掉不使用的组件，以减小CSS捆绑包的大小。 - DisgruntledGoat