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

Question

我正在使用带有 Webpack 4 的 Bulma。我正在尝试将 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;