如何自定义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

并构建错误。

请教我怎么做？

Answer 1

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

最简单的方法是创建cusotm 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.

Answer 2

也许this是您需要的页面。

否则，如果您安装了sass，则可以选择执行以下步骤：我不是npm专家，所以我选择下载Bulma，创建自定义.sass文件，然后让sass生成我的CSS。此处说明了此路径：https://bulma.io/documentation/customize/with-sass-cli/

Answer 3

这可能是错误的形式，但是如果您在html文件中编写自己的CSS，则可以添加!important来覆盖bulma颜色。 也就是说，如果您不喜欢某个按钮颜色，例如is-primary，则可以执行background-color: blue !important。

请尽量不要在各处使用!important。

更好的解决方案是下载sass-但我对此无能为力。另一个答案应该有帮助吗？

Answer 4

我发现，如果您为div设置id="for-example"，然后转到styles.scss，则可以为该id.div创建一个新类，如下所示：

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

我不知道这是否不好，但这对我有用！