Gulp 错误：参数'$color-2'属于'混合($color-1，$color-2，$weight：50%)“'必须是一个颜色时编译我自己的引导主题

hwazgwia 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(305)

我试图建立我自己主题。我改变颜色主题，以我的风格。但我得到了错误时，编译我自己的主题，这是我的主题被创建。

// 1. core variables and mixins
@import "../bootstrap/functions";
@import "../bootstrap/variables";
@import "../bootstrap/mixins";

// 2. custom core variables

// colors
$theme-colors : (
  "primary":    "46B078",
  "secondary":  "#B7E1CB",
  "success":    "#26de81",
  "info":       "#2bcbba",
  "warning":    "#fed330",
  "danger":     "#fc5c65",
);

// 3. core CSS
@import "../bootstrap/root";
@import "../bootstrap/reboot";
@import "../bootstrap/type";
@import "../bootstrap/images";
@import "../bootstrap/code";
@import "../bootstrap/grid";
@import "../bootstrap/tables";
@import "../bootstrap/forms";
@import "../bootstrap/buttons";
@import "../bootstrap/transitions";
@import "../bootstrap/dropdown";
@import "../bootstrap/button-group";
@import "../bootstrap/input-group";
@import "../bootstrap/custom-forms";
@import "../bootstrap/nav";
@import "../bootstrap/navbar";
@import "../bootstrap/card";
@import "../bootstrap/breadcrumb";
@import "../bootstrap/pagination";
@import "../bootstrap/badge";
@import "../bootstrap/jumbotron";
@import "../bootstrap/alert";
@import "../bootstrap/progress";
@import "../bootstrap/media";
@import "../bootstrap/list-group";
@import "../bootstrap/close";
@import "../bootstrap/modal";
@import "../bootstrap/tooltip";
@import "../bootstrap/popover";
@import "../bootstrap/carousel";
@import "../bootstrap/utilities";
@import "../bootstrap/print";

Gulp上错误消息：

Error in plugin "sass"
Message:
    src/sass/bootstrap/_functions.scss
Error: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
        on line 85 of src/sass/bootstrap/_functions.scss, in function `mix`
        from line 85 of src/sass/bootstrap/_functions.scss, in function `theme-color-level`
        from line 103 of src/sass/bootstrap/_tables.scss
        from line 25 of src/sass/themes/default.scss
>>   @return mix($color-base, $color, $level * $theme-color-interval);

   ----------^

如何修复这个错误，我的代码有什么问题。我按照 Bootstrap 文档中的说明操作，但仍然出现错误。

gulp

来源：https://stackoverflow.com/questions/53367448/error-argument-color-2-of-mixcolor-1-color-2-weight-50-must-be-a

2条答案

按热度按时间

vq8itlhq1#

theme-colors中的primary颜色在颜色值之前缺少#符号。
正确的行应如下所示：

"primary":    "#46B078",

赞(0）回复(0）举报 2022-12-08

aiazj4mn2#

我在将我的项目从bootstrap 4升级到bootstrap 5时遇到了这个问题。在尝试我的解决方案之前，请确保颜色值前没有缺少#符号。
在我的例子中，当$color-2引用另一个变量时，它引用了另一个变量。为了解决这个问题，我从所有变量中删除了！default，除了定义为实际颜色的变量。
例如：
姓名首字母缩写：（在_variables.scss中）

$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200 !default;
$form-file-button-bg:$input-group-addon-bg !default;

更改为：（删除了$input-group-addon-bg和$form-file-button-bg上的！默认值，但将其保留为$gray-200：编号e9 ecef）

$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200;
$form-file-button-bg:$input-group-addon-bg;

注意：！default如果您要覆写已移除“！default”的变数，这可能会造成问题。

赞(0）回复(0）举报 2022-12-08

我来回答

Gulp 错误：参数'$color-2'属于'混合($color-1，$color-2，$weight：50%)“'必须是一个颜色时编译我自己的引导主题

2条答案

相关问题

热门标签

最新问答