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/

我注意到在他们的示例中，他们确实在重新定义初始值的地方为派生变量BUT设置了新值，像这样...

$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;

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

1 个答案: