reactjs - 使用 React 自定义 bool 玛

Question

我尝试自定义 bool 玛默认颜色。我已经安装了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 。请参阅this part CRA 文档。

基本上在你的 package.json 脚本中:

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


我上面的脚本将 css 放在构建文件夹中，我使用 link index.html 中的标记，但您可以构建 import也是如此。