Customizing Bulma in your CRA app

It’s a simple thing, but admittedly, it took me way to long to figure out — I tend to get in my own way. Bulma’s customization docs aren’t explicit. And that’s ok; they don’t need to be since I am dealing with the pure CSS framework and not a React port. My Googling only produced one thread in their Github relating to create-react-app . Once the solution clicked for me I figured I could publish it, and then hopefully two results would show up in future Googling.

This solution assumes 1) you’ve set up you CRA app using the suggested css preprocessor configuration, and 2) you’ve already installed Bulma via npm:

//  src/theme.scss

@import 'bulma/sass/utilities/initial-variables.sass';

// your customization as described in the Bulma docs

@import 'bulma/bulma.sass';

Then importtheme.scss at the top of your app somewhere. I stuck mine inside index.js .

That’s it.