Bulma: bluma with nextjs

[Tankerxyz]

This is about **Bulma.

Who has any thoughts on how to use all the features of Bluma (variables, etc.) With the nextjs framework?

[jnsdrtlf]

This should work perfectly without any hustle. You just download bulma.css and put it in your /static folder. You can then add the styles to your app by including them in your head: nextjs docs

You can apply the styles to any item just like in html.

[jgthms]

Thanks @jnsdrtlf

[InstanceOfMichael]

What about if you want to include editing your SASS variables and tree-shaking?

[jnsdrtlf]

@InstanceOfMichael I would copy the bulma source code into a project folder, edit the sass variables and sass code as needed, and use something like gulp or your existing build tool to bundle it to css, then import it in your head.

[jvarness]

Here's a starter project that I found that uses NextJs with Bulma: https://github.com/techno246/next-starter

With a little webpack magic they're able to import all the Bulma styles into the project.

You might be able to use next-scss as well. This is probably easier: https://github.com/zeit/next.js/tree/master/examples/with-next-sass

[jvarness]

Here's an example of how I did it using @zeit/next-sass and bulma npm packages: https://github.com/jvarness/next-with-bulma

[jeffryang24]

It is not working when using cssModules config enabled for both next-sass or next-css plugin. How to make it work while enabling cssModules? :bowing_man:

[fullstackwebdev]

it doesn't work. Works with just SCSS, but as soon as you import any CSS you will get an error or it will go into an infinite loop and never load. There is something buggy going on with NextJS and Bulma - unable to import css