首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >错误:在编译我自己的引导主题时,参数‘$ color -2’的‘`mix($color-1,$color-2,$weight: 50%)’必须是一个颜色

错误:在编译我自己的引导主题时,参数‘$ color -2’的‘`mix($color-1,$color-2,$weight: 50%)’必须是一个颜色
EN

Stack Overflow用户
提问于 2018-11-19 02:15:38
回答 1查看 3.4K关注 0票数 0

我试着建立自己的主题。我把颜色主题改为我的风格。但是我在编译我自己的主题时出错了,这是我的主题被创建的。

代码语言:javascript
运行
复制
// 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";

关于吞咽的错误消息:

代码语言:javascript
运行
复制
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);

   ----------^

如何修复此错误,我的代码有什么问题。我遵循了引导文档中的指示,但仍然出错。

EN

回答 1

Stack Overflow用户

发布于 2022-04-21 16:47:35

在将我的项目从引导4升级到引导5时,我遇到了这个问题。在尝试我的解决方案之前,请确保在颜色值之前没有遗漏#符号。

在我的例子中,当$color-2指的是另一个变量,它指的是另一个变量,另一个变量。为了修复它,我从除定义为实际颜色的变量之外的所有变量中删除了默认值。

例如:

初始值:(这是_variables.scss中的)

代码语言:javascript
运行
复制
$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200 !default;
$form-file-button-bg:$input-group-addon-bg !default;

改为:(删除!$input addon-bg和$form-file-按钮-bg的默认值,但将其保留为$gray-200:#e9ecef)。

代码语言:javascript
运行
复制
$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200;
$form-file-button-bg:$input-group-addon-bg;

注意:!默认这可能会导致问题,如果您是覆盖您删除的变量" !default“。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53367448

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档