使用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/我也尝试过这种方法，但也没有成功

Answer 1

我认为您的.scss文件看起来不错，尽管您不需要包含.sass扩展名(看起来您正在编写的是.scss，而不是.sass，所以我会删除它)。

最重要的是，您需要包含一个将scss转换为css的构建过程。请参阅CRA文档的this part。

基本上在你的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。

Answer 2

嘿，伙计们，在接受了上面的建议后，我重新配置了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文件的新版本，而不是它附带的版本

干杯