Question

嘿伙计们已经有一段时间试图自定义bulma默认颜色我安装了node-sass它似乎正在工作并且在我的root 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'

但是，这似乎并没有改变我的项目中的主要颜色或主要字体选择。我已经将这个文件导入到我的index.js文件中的反应和bulma肯定只是不接受我的自定义。任何帮助非常感谢谢谢

更新继承了描述如何执行此操作的bulma文档的链接 http://bulma.io/documentation/overview/customize/我尝试过这种方式也没有成功

Answer 1

我认为您的.scss文件看起来不错，但您不需要添加.sass扩展名（看起来您正在撰写.scss，而不是{ {1}}，无论如何，我将其删除。）

主要的是你需要包含一个将.sass转换为scss的构建过程。请参阅CRA文档的this part。

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

css

我上面的脚本是将css放在build文件夹中，我在index.html中使用json "build:css": "node-sass ./src/scss/main.scss ./build/main.css", "build:css:watch": "npm run build:css -- -w",标记，但您也可以构建link。

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文件，因为你想要创建一个新的buildmama文件版本而不是随附的那个文件

干杯

使用react

2 个答案: