3

我尝试自定义 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/我也尝试过这种方式但没有成功

4

2 回答 2

3

我认为您的.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 文件夹中，我link在 index.html 中使用了一个标签，但你也可以构建import。

于 2017-09-28T18:24:50.237 回答
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 文件的新版本，而不是与它一起打包的文件

干杯

于 2017-09-29T16:54:07.203 回答