Gatsby Start Netlify CMS - Overloading Bulma CSS and SASS to force/change CSS

Hey there. I’ve been trying to change the CSS from my Gatsby CMS starter, I finally succeed but I don’t think this is the right way and I’m not sure I should do it like this.

I usually have in my folder components/all.sass a sass file where I can touch the css, but it doesn’t do it everywhere. Let’s say for example I want to modify my navbar css, nothing I put in this file get applied. I have two examples :

Here is the default colour coming from Bulma CSS applied to my navbar.

If I want to change this colour I can’t do it in my components/all.sass
I’ll have to modify this file :

/node_modules/bulma/components/navbar.sass

where I do put my

$gold = #FFD700
and replace the value of :
$navbar-items-hover-color=$link !default, to $gold.
and it works this way :

Is there any way I can put this sass to my usual sass without having to modify the node_modules ? I do believe that if I deploy that anywhere It’s not going to work. There must be a better way, do you know how to ?

Thanks in advance, kindest regards and have a nice Sunday.

hi there, thanks for your patience. We’re not 100% sure about this, and things it needs a little more investigation.

Could you file an issue on Issues · netlify-templates/gatsby-starter-netlify-cms · GitHub regarding this so we can take a closer look?

thanks! :smiley:

As the Bulma docs state: “To override any of these variables, just set them before importing Bulma: Variables | Bulma: Free, open source, and modern CSS framework based on Flexbox