Vue.js SassError:darken（$color，$amount）的参数“$color”必须是颜色

我正在尝试使用以下SCSS代码在Bulma中添加自定义颜色贴图：

//设置颜色
$primary:5B43CC；
$primary invert:findColorInvert（$primary）；
$twitter:#4099FF；
$twitter invert:findColorInvert（$twitter）；
$facebook:#4267B2；
$facebook invert:findColorInvert（$facebook）；
$自定义颜色：(
“foo”：（黑色、灰色），
);
//导入延髓核
@导入“~bulma/sass/utilities/_all”；
//链接
$link:$primary；
$link invert:$primary invert；
$link focus border:$primary；
//导入Bulma和Buefy样式
//此文件已移动到App.vue，因为它必须位于末尾
@导入“~bulma”；
@导入“~buefy/src/scss/buefy”；

但我得到了以下错误：

编译失败，出现6个错误1:26:26 AM
./src/App.vue中出错？vue&type=style&index=0&lang=scss&
模块构建失败（来自./node_modules/sass loader/dist/cjs.js）：
SassError:darken（$color，$amount）的参数“$color”必须是颜色
在“变暗”功能中节点模块/bulma/sass/elements/button.sass的第150行`
从节点模块/bulma/sass/elements/button.sass的第150行开始
来自node_modules/bulma/sass/elements/_all.sass的第4行
来自节点_模块/bulma/bulma.sass的第5行
来自src/assets/scss/main.scss的第40行
来自/c/Users/Raj/Projects/testsite/src/App.vue的第2行
>>背景色：变暗（$color invert，5%）；}
----------------------------^
@./node_模块/vue样式加载器？？参考-8-oneOf-1-0/node_modules/css loader/dist/cjs.js？？ref--8-oneOf-1-1/node_modules/vue loader/lib/loaders/stylePostLoader.js/节点_模块/postss加载器/src？？参考-8-oneOf-1-2/node_modules/sass loader/dist/cjs.js？？ref--8-oneOf-1-3/node_modules/cache loader/dist/cjs.js？？ref--0-0/节点\模块/vue加载程序/lib？？vue加载程序选项/src/App.vue？vue&type=style&index=0&lang=scss&4:14-41614:3-18:515:22-424
@./src/App.vue？vue&type=style&index=0&lang=scss&
@./src/App.vue
@/src/main.js
@多（网页包）-开发服务器/客户端？http://localhost:8080/sockjs-节点（webpack）/hot/dev-server.js./src/main.js

但是，如果我注释掉

/$primary invert:findColorInvert（$primary）然后错误消失。此外，如果
//设置颜色
下的代码段在
@import“~bulma/sass/utilities/\u all”
之后移动，则错误也会消失

我做错了什么

注意，这是对
的跟进，正如我在评论中提到的，当涉及到Sass编译时，它是关于排序的（导入

s和/或变量声明）。现在，由于这些颜色反转使用的是一个名为Bulma的实用程序，它位于

utilities/functions.sass

中，因此我们可能无法在此处导入

utilities

我们可以将它们分开，并在

函数

和

派生变量

之间插入我们的习惯：

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

// Set your colors
$primary: #5B43CC;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #4267B2;
$facebook-invert: findColorInvert($facebook);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

$custom-colors: (
  "foo": (black, grey),
);

@import "~bulma/sass/utilities/derived-variables";
@import "~bulma/sass/utilities/animations";
@import "~bulma/sass/utilities/mixins";
@import "~bulma/sass/utilities/controls";

---

因此，正如我在评论中提到的，当涉及到Sass编译时，都是关于排序的（关于

import

s和/或变量声明）。现在，由于这些颜色反转使用的是一个名为Bulma的实用程序，它位于

utilities/functions.sass

中，因此我们可能无法在此处导入

utilities

我们可以将它们分开，并在

函数

和

派生变量

之间插入我们的习惯：

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

// Set your colors
$primary: #5B43CC;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #4267B2;
$facebook-invert: findColorInvert($facebook);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

$custom-colors: (
  "foo": (black, grey),
);

@import "~bulma/sass/utilities/derived-variables";
@import "~bulma/sass/utilities/animations";
@import "~bulma/sass/utilities/mixins";
@import "~bulma/sass/utilities/controls";

---

能否确认

$color invert

是否确实是有效的颜色（十六进制）值？@YomS。我没有说明

$color invert

的SCSS代码。我唯一的SCSS代码是我在第一个代码块中发布的代码<代码>变暗（$color invert）必须由Bulmaren在内部使用，您不这样做吗

背景色：变暗（$color invert，5%）

在App.vue中的某个地方？不过别担心，因为你已经确认没有在这方面申报任何东西。@YomS。不，唯一的SCS在App.vue中，它包含我在上面第一个代码块中显示的内容。（为了简化事情，我去掉了我之前链接的帖子中讨论过的

base.scss

）这些颜色反转使用的是一个名为的函数，它位于

实用程序/函数.sass

中，所以可能又是排序问题。尝试在

实用程序/u all

之后移动这些行（并且仅移动它们，而不是

$custom colors

）。能否确认

$color invert

是否确实是有效的颜色（十六进制）值？@YomS。我没有说明

$color invert

的SCSS代码。我唯一的SCSS代码是我在第一个代码块中发布的代码<代码>变暗（$color invert）必须由Bulmaren在内部使用，您不这样做吗

背景色：变暗（$color invert，5%）

在App.vue中的某个地方？不过别担心，因为你已经确认没有在这方面申报任何东西。@YomS。不，唯一的SCS在App.vue中，它包含我在上面第一个代码块中显示的内容。（为了简化事情，我去掉了我之前链接的帖子中讨论过的

base.scss

）这些颜色反转使用的是一个名为的函数，它位于

实用程序/函数.sass

中，所以可能又是排序问题。尝试将这些行（并且只移动它们，而不是将

$custom colors

）移动到

实用程序/u all

之后。为什么定义

$colors

会使

$custom colors

不再得到遵守？我认为

mergeColorMaps（）

将允许两者都工作，事实上，第二个参数（在本例中为

$custom colors

）将覆盖两个贴图中的任何重叠键。我相信这是因为它没有将

$colors

与

$custom colors

合并为

$colors

，而是：为什么定义

$colors

使

$custom colors

不再得到遵守？