Search code examples
cssreactjssassbulma

SASS/CSS not fully modified with react and bulma

I integrated bulma in my create-react-app application but when changing the primary color it is not applied to every component.

This is the return statement of my App.jsx:

<section className="hero is-primary">
Some title
</section>
<section>
Some text
</section>

This is my index.scss:

@import '~bulma/bulma.sass';
$primary: $black;

body {
background-color: $primary;
}

Thing is "some text" will have the black background but "some title" will have the default primary color. Not sure what I am missing. I use node-sass.

Solution

  • As told in the comment above: if you have the same problem you just need to declare the variables before importing the library. Of course you won't be able to use the color variables in this case but rather set static color values.