Bootstrap SCSS: $color: theme-color("primary") 不是颜色答案

【问题标题】：Bootstrap SCSS: $color: theme-color("primary") is not a colorBootstrap SCSS: $color: theme-color("primary") 不是颜色
【发布时间】：2020-08-11 10:14:40
【问题描述】：

我正在尝试覆盖 bootstrap4 样式。我没有使用 Sass 的经验，但这看起来像是 bootstrap 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";

我使用的是 bootstrap 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'; }

有什么见解吗？

【问题讨论】：

标签： twitter-bootstrap sass colors

【解决方案1】：

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

首先导入引导函数和变量

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

导入您已在其中覆盖引导主题颜色和其他引导变量的自定义变量文件。

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

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

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

【讨论】：

【解决方案2】：

theme-color 是引导程序的内部函数：

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

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

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

【讨论】：