Search code examples
reactjssassnext.jsbulma

Customizing Bulma with Next.js

I try to customize the Bulma default yellow colors for my Next.js project.

I have one global Sass file where I am changing the default $yellow and $warning color. However, when I import this file in my _app.js, nothing happens.

@import "../node_modules/bulma/sass/utilities/initial-variables"

$yellow: #dc7185
$warning: $yellow

@import "bulma/css/bulma.css"
Solution

  • Since you want to overwrite Sass variables you'll want to import the Sass file rather than the CSS one.

    /* You global Sass file */

$yellow: #dc7185;
$warning: $yellow;

@import "~bulma/bulma.sass";