如何自定义Bulma？

Question

我想自定义Bulma。 我阅读了文档https://bulma.io/documentation/overview/customize/，但我无法理解。

1. npm install bulma
2. cd node_modules/bulma
3. mv bulma.sass bulma.sass.org
4. vi bulma.sass
5. 粘贴设置变量代码并将其保存为bulma.sass
6. npm run build-sass

然后出现了构建错误。

请教我如何解决？

- user2850652

---

你卡在哪个部分了？ - sol

我正在尝试更改已粘贴的代码以保存Sass目录。 - user2850652

并编辑 package.json 将路径更改为以下内容 - user2850652

"hoge": "node-sass --output-style expanded --source-map true ./sass/hoge.sass css/bulma.css", - user2850652

npm run hoge 但是退出代码为1 - user2850652

Answer 1

首先，最好的方法不是更改 node_module 文件内容。

最简单的方法是创建自定义的 scss 文件并将 Bulma 的 SCSS 引入其中。

@charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
@import "~bulma"; // or fallow the partial import example from docs.

// add custom css here.

- Assassin

---

你应该把这个自定义的 SCSS 文件放在哪里，以便你的项目知道它的存在？ - ezeYaniv

Answer 2

这可能不是最好的方式，但如果您在HTML文件中编写自己的CSS代码，则可以添加！important以覆盖Bulma颜色。 例如，如果您不喜欢按钮颜色（如is-primary），则可以使用background-color：blue！important。 请尽量不要在所有地方都使用！important。

更好的解决方案是下载Sass-但我无法提供帮助。其他答案应该有所帮助？

- ClaireBookworm

---

我认为在这里使用!important不是一个好的选择。 - Assassin

你越是试图覆盖样式，就越需要应用更多的 !important 情况。 - Assassin

Answer 3

也许这个页面是您需要的。

否则，如果您已经安装了sass，您可以选择按照以下步骤操作：我不是npm专家，所以我选择下载Bulma，创建一个自定义的.sass文件，并让sass生成我的css。此方法在这里有详细说明：https://bulma.io/documentation/customize/with-sass-cli/。

- Max Lambertini

---

需要使用Sass吗？我们不能只创建CSS文件并从中覆盖吗？ - MarcoZen

Answer 4

我发现，如果你为一个

设置id="for-example"，然后进入你的styles.scss文件，你可以为那个id.div创建一个新的类，就像这样：

#for-example {
  background-color: blue;
} 

我不知道这是否是一种不好的做法，但它对我有效！

- pipe illera