无法使用 node-sass 自定义 Bulma 框架

Question

我正在学习 Sass 并尝试自定义 Bulma CSS 框架。我想把它变成紫色，但没用。

我有运行 npm init 并安装了 Bulma 和 node-sass。

我的 sass 文件: -

@import "node_modules/bulma/bulma";

$purple: #8A4D76;
$primary: $purple;

body {
  background: aquamarine;
  margin: 0;
}

package.json文件的脚本部分：-

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "node-sass scss/ -o dist/css/"
  }

我创建了一个按钮，我在上面设置了主按钮 class。我得到的是默认的布尔玛绿色，但我没有得到定制的紫色。我该如何进行？

Answer 1

如果出现默认 Bulma 样式，则它可能与 package.json 文件的脚本部分无关，而是与 sass 文件有关。

它不起作用，因为您在自定义 sass 变量之前导入了 Bulma 。

你应该做的是设置 $purple 和 $primary 然后你的 @import 像这样：

// Set your variables $purple: #8A4D76; $primary: $purple; // Import bulma @import "node_modules/bulma/bulma"; // This is classic CSS not related to bulma, you can place it where your want body { background: aquamarine; margin: 0; }

你可以看看this example scss file from the documentation。

此外，如果你想使用 Bulma extensions，你需要在你的 scss 文件中导入它们 Bulma 本身。

所以你的 scss 文件中的顺序应该是：

自定义 sass 变量

导入布尔玛

正在导入 Bulma 扩展

无法使用 node-sass 自定义 Bulma 框架

Unable to customize Bulma Framework with node-sass

css

npm

sass

bulma

node-sass