Bootstrap SCSS: $color: theme-color("primary") 不是一种颜色

Question

我正在尝试覆盖 bootstrap4 样式。我没有使用 Sass 的经验，但这看起来像是引导程序 SCSS 文件中的错误。

我的自定义文件是：

/* custom.scss */    
/* -------begin customization-------- */  
$body-bg: #000;
$body-color: #111;
/* -------end customization-------- */  

/* import the necessary Bootstrap files */
@import "/bootstrap-4.0.0/scss/_variables.scss";

我正在使用引导程序 4.4.1，但只能找到 4.0.0 的 scss 文件。

在

sass /custom.scss /custom.css 

我得到：

 $color: theme-color("primary") is not a color.
    ?
152 ? $link-hover-color:          darken($link-color, 15%) !default;
    ?                             ^^^^^^^^^^^^^^^^^^^^^^^^
    ?
  /bootstrap-4.0.0/scss/_variables.scss 152:29  @import
  /custom.scss 8:9                   root stylesheet

目标 custom.css 文件包含：

> /* Error: $color: theme-color("primary") is not a color.  *     ,  *
> 152 | $link-hover-color:          darken($link-color, 15%) !default; 
> *     |                             ^^^^^^^^^^^^^^^^^^^^^^^^  *     '  *   /scss/_variables.scss 152:29  @import  *   custom.scss 8:9                 root stylesheet */
> 
> body::before {   font-family: "Source Code Pro", "SF Mono", Monaco,
> Inconsolata, "Fira Mono",
>       "Droid Sans Mono", monospace, monospace;   white-space: pre;   display: block;   padding: 1em;   margin-bottom: 1em;   border-bottom:
> 2px solid black;   content: 'Error: $color: theme-color("primary") is
> not a color.\a     \2577 \a 152 \2502  $link-hover-color:         
> darken($link-color, 15%) !default;\a     \2502                        
> ^^^^^^^^^^^^^^^^^^^^^^^^\a     \2575 \a   /scss/_variables.scss 152:29
> @import\a   \/custom.scss 8:9                   root stylesheet'; }

任何见解？

Answer 1

问题在于您导入文件的顺序。请尝试这种方式，看看它是否有效

1. 首先导入引导函数和变量

/* === Import Bootstrap functions and variables === */
@import "/bootstrap/scss/functions";
@import "/bootstrap/scss/variables";

2. 导入您已覆盖引导程序主题颜色和其他引导程序变量的自定义变量文件。

/* === Import Custom variables === */
@import '/variables';

3. 最后，bootstrap 主 scss：因此，根据您的主题变量（第 2 步）创建新的并在整个应用程序中应用

/* === Boostrap Main SCSS === */
@import "/bootstrap/scss/bootstrap";

Answer 2

theme-color是 bootstrap 的内部函数：

 $color: theme-color("primary") is not a color.

在导入变量之前导入引导函数。像这样的东西：

@import "/bootstrap-4.0.0/scss/functions";
@import "/bootstrap-4.0.0/scss/variables";