SassError:参数‘$ color’的暗($color，$amount)‘必须是颜色

Question

我试图在Bulma中添加一个自定义颜色地图，其中包含以下SCSS代码：

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

但我得到了以下错误：

 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

但是，如果我注释掉了// $primary-invert: findColorInvert($primary);，那么错误就消失了。另外，如果// set your colors下的代码段是在@import "~bulma/sass/utilities/_all"之后移动的，那么错误也会消失。

我在这里做错什么了？

注意，这是https://stackoverflow.com/questions/62112173/how-to-extend-a-variables-map-in-scss的后续行动。

Answer 1

因此，正如我在注释中提到的，当涉及到Sass编译时，它都是关于排序( imports和/或变量声明)。现在，由于这些颜色反转使用的是一个名为findColorInvert的Bulma实用程序，它驻留在utilities/functions.sass中，因此我们可能无法在这里导入带有原订单的utilities。

我们可以把它们分开，在functions和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";