SassError:`darken($color, $amount)` 的参数`$color` 必须是一种颜色 [英] SassError: argument `$color` of `darken($color, $amount)` must be a color
问题描述
我正在尝试使用以下 SCSS 代码在 Bulma 中添加自定义颜色映射:
//设置颜色$primary: #5B43CC;$primary-invert: findColorInvert($primary);$推特:#4099FF;$twitter-invert: findColorInvert($twitter);$facebook:#4267B2;$facebook-invert: findColorInvert($facebook);$自定义颜色:(foo":(黑色,灰色),);//导入布尔玛的核心@import "~bulma/sass/utilities/_all";//链接$link: $primary;$link-invert: $primary-invert;$link-focus-border: $primary;//导入 Bulma 和 Buefy 样式//this 已经移到 App.vue 因为它必须在最后@import "~bulma";@import "~buefy/src/scss/buefy";
但我收到以下错误:
错误 1:26:26 AM 无法编译,有 6 个错误./src/App.vue?vue&type=style&index=0&lang=scss& 中的错误模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js):SassError:`darken($color, $amount)` 的参数`$color` 必须是一种颜色在 node_modules/bulma/sass/elements/button.sass 的第 150 行,在函数 `darken` 中来自 node_modules/bulma/sass/elements/button.sass 的第 150 行来自 node_modules/bulma/sass/elements/_all.sass 的第 4 行来自 node_modules/bulma/bulma.sass 的第 5 行来自 src/assets/scss/main.scss 的第 40 行来自/c/Users/Raj/Projects/testsite/src/App.vue 的第 2 行>>背景颜色:变暗($color-invert,5%);}-----------------------------^@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--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!./node_modules/vue-loader/lib??vue-loader-options!../src/App.vue?vue&type=style&index=0&lang=scss&4:14-416 14:3-18:5 15:22-424@ ./src/App.vue?vue&type=style&index=0&lang=scss&@ ./src/App.vue@ ./src/main.js@ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
但是,如果我注释掉 //$primary-invert: findColorInvert($primary);
那么错误就会消失.此外,如果 //set your colours
下的代码段在 @import "~bulma/sass/utilities/_all"
之后移动,那么错误也会消失.>
我在这里做错了什么?
注意,这是对这个的后续以前的帖子
所以正如我在评论中提到的,当谈到 Sass 编译时,它完全是关于排序(import
s 和/或变量声明).现在,由于这些颜色反转正在使用名为 nofollow 的 Bulma 实用程序findColorInvert
位于 utilities/functions.sass
中,我们可能无法使用 utilities"https://github.com/jgthms/bulma/blob/master/sass/utilities/_all.sass" rel="nofollow noreferrer">原始订单在这里.
我们可以拆分它们并在 functions
和 derived-variables
之间插入我们的习惯:
@import "~bulma/sass/utilities/initial-variables";@import "~bulma/sass/utilities/functions";//设置颜色$primary: #5B43CC;$primary-invert: findColorInvert($primary);$推特:#4099FF;$twitter-invert: findColorInvert($twitter);$facebook:#4267B2;$facebook-invert: findColorInvert($facebook);//链接$link: $primary;$link-invert: $primary-invert;$link-focus-border: $primary;$自定义颜色:(foo":(黑色,灰色),);@import "~bulma/sass/utilities/derived-variables";@import "~bulma/sass/utilities/animations";@import "~bulma/sass/utilities/mixins";@import "~bulma/sass/utilities/controls";
I am attempting to add a custom color map in Bulma, with the following SCSS code:
// Set your colors
$primary: #5B43CC;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #4267B2;
$facebook-invert: findColorInvert($facebook);
$custom-colors: (
"foo": (black, grey),
);
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
// this has been moved to App.vue because it must be at the end
@import "~bulma";
@import "~buefy/src/scss/buefy";
But I get the following error:
ERROR Failed to compile with 6 errors 1:26:26 AM
error in ./src/App.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$color` of `darken($color, $amount)` must be a color
on line 150 of node_modules/bulma/sass/elements/button.sass, in function `darken`
from line 150 of node_modules/bulma/sass/elements/button.sass
from line 4 of node_modules/bulma/sass/elements/_all.sass
from line 5 of node_modules/bulma/bulma.sass
from line 40 of src/assets/scss/main.scss
from line 2 of /c/Users/Raj/Projects/testsite/src/App.vue
>> background-color: darken($color-invert, 5%); }
----------------------------^
@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--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!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424
@ ./src/App.vue?vue&type=style&index=0&lang=scss&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
However, if I comment out // $primary-invert: findColorInvert($primary);
then the error goes away. Also, if the snippet under // set your colors
is moved after @import "~bulma/sass/utilities/_all"
, then the error also goes away.
What am I doing wrong here?
Note, this is a follow-up to this previous post
So as I mentioned in the comments, when it comes to Sass compilation it's all about ordering (of import
s and/or variable declarations). Now, since those color inversions are using a Bulma utility called findColorInvert
, which resides within utilities/functions.sass
, we can't probably import the utilities
with the original order here.
We could split them and insert our customs in between the functions
and derived-variables
:
@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";
这篇关于SassError:`darken($color, $amount)` 的参数`$color` 必须是一种颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!