使用React自定义Bulma

Question

我尝试自定义Bulma默认颜色。我已安装node-sass，它似乎正在工作中，并且在我的根scss文件中，我编写了脚本。

@import '../node_modules/bulma/sass/utilities/initial-variables.sass';

$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;

@import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;

@import '../node_modules/bulma/css/bulma.css'

然而，这似乎没有改变我的项目中的主要颜色或主要字体选择。我已经将此文件导入到我的React index.js文件中，Bulma肯定起作用，但不接受我的自定义设置。

更新：这里是Bulma文档描述如何做到这一点的链接http://bulma.io/documentation/overview/customize/。我也尝试了那种方式，但没有成功。

- Chris Wallace

Answer 1

我认为你的.scss文件看起来很好，尽管你不需要包含.sass扩展名（因为看起来你正在编写.scss而不是.sass，所以我会将其删除）。

主要的问题是你需要包含一个构建过程来将scss转换为css。请参阅CRA文档中的这一部分。

基本上，在你的package.json脚本中：

json "build:css": "node-sass ./src/scss/main.scss ./build/main.css", "build:css:watch": "npm run build:css -- -w",

我的脚本将css放在build文件夹中，我在index.html中使用了一个link标签，但你也可以构建和import。

- martypdx

Answer 2

大家好，根据上面的建议，我重新配置了package.json。另外，我将我的源Sass脚本更改为以下内容。

@import '../node_modules/bulma/sass/utilities/initial-variables.sass';

$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;

@import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;

@import '../node_modules/bulma/bulma.sass'

你需要将scss或sass文件指向bulma.sass，而不是bulma.css文件，因为你想创建一个与预装版本不同的新版本bulma.css文件

干杯

- Chris Wallace