Configuring Bulma variable overrides in Nuxt/Buefy

2 Jul 2021 buefy bulma nuxt sass vue

Recently I was working on a project that used Buefy (a Vue-based implementation of the popular Bulma design system) with Nuxt, the Vue framework.

All was well - it's simple enough to set up; there's a Buefy module for Nuxt - but I couldn't figure out how to configure Bulma variable overrides. In this article I'll show you how.

Setting up Nuxt with Buefy 🔗

Setting up Nuxt to use Buefy/Bulma is easy enough. You can do this during the Q-and-A phase when you run create-nuxt-app, as one of the questions asks which CSS framework you'd like to use, if any, with Buefy being one of the options.

If you don't do this, you can always add Buefy/Bulma manually later, via:

npm install nuxt-buefy
#or
yarn add nuxt-buefy

If you add it manually, you'll also need to manually add a Buefy section to your nuxt.config.js file, as shown in the Buefy docs. This is done for you if you stipulate Buefy when running create-nuxt-app.

So far, so good. We have Buefy/Bulma active in our project, and we can use the Buefy components and Bulma classes within our components. But how do we override Bulma variables, e.g. colours?

Buefy doesn't, unfortunately, provide any clever means of doing this, so we need to do something clever ourselves.

Setting variables 🔗

First we need to disable the automatic loading of Buefy/Bulma by Nuxt. This is done by setting the css config param to false.

{
    modules: [
        ['nuxt-buefy', {css: false, ...}]
        //------------- ^^^ set this to false!
    ]
}

Now we have no Bulma/Buefy. Let's load it ourselves - but this time, having set some variables first.

First, create a new file in whichever folder you store your assets, called buefy-init.scss. In it, put the following:

@import "~bulma/sass/utilities/derived-variables";

// --> set Bulma variables here! <--

@import "~bulma/bulma";
@import "~buefy/src/scss/buefy";

Every subsequent bit of code goes in place of the comment above, "set Bulma variables here!".

We first import Bulma's list of derived variables. These include things like the project's primary colour, its link colour, danger (warning) colour, and so on. We need these to be set to their defaults first, so we can then override them. To override these, we'll set our own versions then merge them into Bulma's colours map.

$my-bulma-colours: (
    primary: #f00,
    link: #0f0
    //etc
);
@each $var, $val in $my-bulma-colours {
    $colors: map-merge($colors, ($var: ($val, white)));
}

Why merge, rather than just 'set' new colours in the map? Not all implementations of SASS, which Bulma variables are based on, support this, so map-merging seems to be the preferred approach.

If instead we wanted to override some variables specific to certain components, e.g. the variable that controls the default colour of buttons, we can do this with simple, single-line override statements:

$button-color: #d70;

Once we've finished overriding, we load Bulma and then Buefy manually. This is instead of having them loaded automatically by Nuxt (we disabled that earlier, in the Nuxt config).

So there you are!

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!