如何定制布尔玛？答案

【问题标题】：How to customize Bulma?如何定制布尔玛？
【发布时间】：2017-11-15 23:08:52
【问题描述】：

我想定制布尔玛。我阅读了文档https://bulma.io/documentation/overview/customize/ 但我无法理解。

npm install bulma
cd node_modules/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
已粘贴设置变量代码并保存名为 bulma.sass
npm run build-sass

和构建错误。

请教我怎么做？

【问题讨论】：

你卡在哪一部分了？
我正在尝试更改粘贴的代码以保存 sass 目录。
并编辑 package.json 以指向这样的更改路径
"hoge": "node-sass --output-style expand --source-map true ./sass/hoge.sass css/bulma.css",
npm 运行 hoge 但退出 1

标签： sass customization bulma

【解决方案1】：

这可能是错误的形式，但如果您在 html 文件中编写自己的 css，则可以添加 !important 以覆盖 bulma 颜色。即，如果有您不喜欢的按钮颜色，例如is-primary，您可以使用background-color: blue !important。

尽量不要到处使用!important。

更好的解决方案是下载 sass——但我无能为力。其他答案应该有帮助吗？

【讨论】：

我不认为这是申请的好案例！重要在这里。
您尝试覆盖的样式越多，您必须应用的重要案例就越多。

【解决方案2】：

首先，最好的办法是不要改变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.

【讨论】：

【解决方案3】：

也许this 是您需要的页面。

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

【讨论】：

有必要使用 sass 吗？我们不能只创建我们的 css 文件并从中覆盖吗？

【解决方案4】：

我发现如果你为一个 div 设置一个id="for-example" 然后你去你的styles.scss 你可以像这样为id.div 创建一个新类：

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

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

【讨论】：