customizing bulma with react

3
votes

I try to customize the bulma default colors. I have installed node-sass and it appears to be working and in my root scss file ive written the script

@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'

However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations.

Update: here is the link to the bulma docs describing how to do this http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well

2
reactjssassbulma

2 Answers

3
votes

I think your .scss file looks good, though you don't need to include the .sass extension (it looks like you're writing .scss, not .sass, anyway so I'd remove it.)

The main thing is you need to include a build process that will transform the scss to css. See this part of the CRA docs.

Basically in your package.json scripts:

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

My script above is putting the css in build folder and I'm using a link tag in index.html, but you could build and import as well.

1
votes

Hey guys after taking the advice above I reconfigured the package json. Another side note I changed my source sass script to this

@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'

You have to point your scss or sass file to the bulma.sass not the bulma.css file since your wanting to create a new build of the bulma.css file other than the one that comes packaged with it

Cheers