Unable to customize Bulma Framework with node-sass

Question

I am learning Sass and trying to customize the Bulma CSS framework. I am trying to make it purple but it isn't working.

I have run npm init and installed Bulma and node-sass.

My sass file: -

@import "node_modules/bulma/bulma";

$purple: #8A4D76;
$primary: $purple;

body {
  background: aquamarine;
  margin: 0;
}

The script part of the package.json file: -

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "node-sass scss/ -o dist/css/"
  }

I have created a button on which I have given is-primary class. I am getting the default Bulma green color but I am not getting the customized purple color. How should I proceed?

Answer 1

If the default Bulma styling appears then it‘s probably not related to the script part of your package.json file but rather to the sass file.

It doesn‘t work because you have imported Bulma before customizing the sass variables.

What you should do is set $purple and $primary and then your @import like this:

// Set your variables
$purple: #8A4D76;
$primary: $purple;

// Import bulma
@import "node_modules/bulma/bulma";

// This is classic CSS not related to bulma, you can place it where your want
body {
  background: aquamarine;
  margin: 0;
}

You can take a look at this example scss file from the documentation.

Also if you want to use Bulma extensions, you need to import them after Bulma itself in your scss file.

So the order in your scss file should be:

1. Customizing sass variables

2. Importing Bulma

3. Importing Bulma extensions