twitter-bootstrap - Bootstrap SCSS : $color: theme-color ("primary") is not a color

Question

我正在尝试覆盖 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

objective-c ustom.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

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

首先导入 Bootstrap 函数和变量

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

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

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

最后， Bootstrap 主 scss:因此，新的基于您的主题变量(第 2 步)创建并应用于整个应用程序

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