我应该如何使用SCSS覆盖派生的布尔玛变量？

Question

[我将Bulma与Webpack 4一起使用。我试图将button.is-primary的颜色更改为粉红色，而不是绿松石。

这是我的.scss文件的全部内容。

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:600');

$body-size: 14px;
$primary: $pink;

@import "../../node_modules/bulma/bulma.sass";

这使我在构建时遇到以下错误。

1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1>         ^
1>      Undefined variable: "$pink".

现在，如果我将$ primary设置为特定的十六进制颜色，它会很好地建立，所以这个问题似乎是因为我试图使用现有的颜色变量$ pink。对我来说确实没有定义，但是文档清楚地表明我可以在导入Bulma之前添加我的替代项，并且他们的示例执行相同的操作。

有人能指出我正确的方向吗？

编辑：这是我正在查看的文档屏幕。

https://bulma.io/documentation/customize/with-webpack/

[我注意到，在他们的示例中，仅在重新定义初始值的地方，它们才为派生变量设置新值，就像这样...

$pink: #FA7C91;

如果我按如下方式更改我的.scss文件，则它将按预期进行编译和工作。

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:600');

$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;

@import "../../node_modules/bulma/bulma.sass";

Answer 1

这应该为您澄清事情：https://versions.bulma.io/0.7.0/documentation/overview/customize/

// 1. Import the initial variables
@import "../sass/utilities/initial-variables";


// 2. Set your own initial variables (optional)
$pink: #ffb3b3;


// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;