如何定制Bulma？

Question

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

1. npm安装浮筒
2. cd节点模块/bulma
3. mv bulma.sass bulma.sass.org
4. vi bulma.sass
5. 粘贴设置变量代码并保存命名为bulma.sass
6. npm运行构建程序

和构建错误。

请教我怎么做？

Answer 1

也许这就是你需要的页面。

否则，如果您已经安装了sass，您可以选择遵循以下步骤:我不是npm专家，所以我选择下载Bulma，创建一个自定义的.sass文件，让sass生成我的css。这里解释了这条路径：https://bulma.io/documentation/customize/with-sass-cli/

Answer 2

这可能是不好的形式，但是如果您在html文件中编写自己的css，您可以添加!important来覆盖占线颜色。也就是说，如果有一个你不喜欢的按钮颜色，比如is-primary，你可以做background-color: blue !important。

试着不要在整个地方都使用!important。

更好的解决办法是下载sass --但我无法控制。另一个答案应该有帮助吗？

Answer 3

首先，最好的方法是不更改节点_模块的文件内容。

最简单的方法是创建自定义scss文件，并将Bulma包含在其中。

@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.