覆盖引导SCSS变量

6ss1mwsb  于 2023-02-10  发布在  其他
关注(0)|答案(2)|浏览(219)

覆盖变量的最佳方法是什么?
我发现下面的顺序工作:

@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变量不使用覆盖,而是使用默认值。
有什么想法吗?

bq9c1y66

bq9c1y661#

我通常使用如下结构,/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);
xxhby3vn

xxhby3vn2#

** 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";

演示

相关问题