Bootstrap 引导SCSS：$color：主题颜色(“primary”)不是颜色

lf3rwulv 于 2023-01-15 发布在 Bootstrap

关注(0)|答案(3)|浏览(391)

我试图覆盖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";

我使用的是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

来源：https://stackoverflow.com/questions/61465975/bootstrap-scss-color-theme-colorprimary-is-not-a-color

3条答案

按热度按时间

czfnxgou1#

问题出在导入文件的顺序上。请尝试这种方法，看看是否有效
1.首先导入引导函数和变量

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

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

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

1.最后， Bootstrap 主要scss：因此，新的主题变量将基于您的主题变量创建（第2步），并应用于整个应用程序

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

赞(0）回复(0）举报 2023-01-15

e5nszbig2#

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

赞(0）回复(0）举报 2023-01-15

am46iovg3#

变量导入必须在引导函数导入之后进行。

@import "../../../node_modules/bootstrap/scss/functions";
@import "bootstrap-variables";

赞(0）回复(0）举报 2023-01-15

我来回答

Bootstrap 引导SCSS：$color：主题颜色(“primary”)不是颜色

3条答案

相关问题

热门标签

最新问答