Overrides

[eugeneross]

For overriding Bulma variables and things like breakpoints, it's pretty straightforward. How would the same concept be done using Bloomer?

Mainly, I want to be able to override the breakpoint values and a few other elements that come with Bulma.

[jonasgrunert]

A way that worked for me, was adapting the Bulma sass files through new I have written. This way you can do it the same way as in Bulma and dont have to adapt your code and keep your js clean. E.g.:

// 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/initial-variables";
@import "../../node_modules/bulma/sass/utilities/functions";

// 2. Set your own initial variables
// Update gap
$gap: 64px;
// 6. Import the rest of Bulma
@import "../../node_modules/bulma/bulma";

Then as you are packing your application you can either include it into your application with bundlers or set up a build job to generate a plain css file.
I hope this helped you. If not feel free to ask again or follow this link to bulma.

[eugeneross]

I already do this with the bundlers I have set up. I'm trying to move away from having any .sass files in my whole project and just rely on styled-components for styles and (hopefully) overrides of framework's variables/mixins.

One specific instance is that I rewrite Bulma's mixins for breakpoints (+tablet, +desktop, etc.). As of right now, I have no idea how to override mixins set by external frameworks from ones like Bulma.

[AlgusDark]

Right now you just need to use bulma for that. Take the sass and compile it to css, importing it.

Next version should had all this with Styled-Components.