Overriding Bulma variables does not work

[paulgrieselhuber]

In src/layouts/all.scss, adding, for instance $navbar-padding-horizontal: 15rem on either line 1 or 2 (or anywhere really), before or after @import "~bulma/sass/utilities/initial-variables" does nothing.

According to the Bulma docs, this should be the correct way to override Bulma variables.

[paulgrieselhuber]

Would also appreciate any info here.

[AustinGreen]

If you're still early on in your project, I would recommend switching from Bulma to a react component library. #57 proposed this change, but I felt it was unnecessary for a template project. After using https://react.semantic-ui.com/ in production for a few months, I've completely changed my mind.

Future versions will make this change. I can investigate your specific issue with Bulma if this is not what you were looking for, but I think the root of the problem is that you need a proper react-based UI library with built-in theming.

[paulgrieselhuber]

Thanks for the feedback. Regarding future versions making this change, does this include the gatsby-v2 branch?

[erquhart]

That branch will eventually be merged into master, so yes.

[simoneduca]

@paulisloud, FWIW I had the same issue and the cause was two different import Bulma statements, one at the top and one at the bottom of the file. Once I only had @import "~bulma" at the top of file I was able to override Bulma as expected. Happy to open a PR if that solves it for you.

[ZoltanVeres]

I don't think this is an issue anymore.