用反应定制 bulma答案

【问题标题】：customizing bulma with react用反应定制 bulma
【发布时间】：2018-03-09 13:42:16
【问题描述】：

我尝试自定义 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/我也是这样试的，也没有成功

【问题讨论】：

标签： reactjs sass bulma

【解决方案1】：

大家好，在听取了上述建议后，我重新配置了 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 文件，而不是与它一起打包的文件

干杯

【讨论】：

【解决方案2】：

我认为您的 .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 标记，但您也可以 build 和 import。

【讨论】：