Adding Bulma to Nuxt.js with changeable variables

I started my CSS framework journey using Foundation but ultimately found it to be too bloated and inflexible for my needs. For several years after that I used my own lightweight float grid framework.

Times changed, and when I started using flexbox I decided that I was feeling too lazy to build my own framework again… so I started using Bulma. I like Bulma because it doesn’t force pre-built Javascript down my throat; I can switch between Javascript frameworks and still use my chosen CSS framework. It is also very flexibly coded in SASS, bonus!

So how do I include Bulma in my Nuxt projects?

You get the option to include Bulma with a fresh Nuxt install, but this isn’t actually particularly useful. Part of the appeal of using a framework written in SASS is the flexibility to change the variables. When loading Bulma this way all you get is the fixed CSS.

Installing Bulma

To change this we can make a change in the ‘nuxt.conf.js’ file in the root directory of our install. For those who aren’t familiar, it is the control centre for Nuxt. All of our settings here are reflected in the Nuxt generated Vue files. You can see where Bulma is loaded by navigating to .nuxt/app.js from the project root directory.

Bulma Exists

Back in the ‘nuxt.conf.js’ file, find the modules section and comment out the line ‘@nuxtjs/bulma’. When we rebuild our server instance we can now see that Bulma is no longer being loaded.

Bulma Gone

Right! Now we are in a position where Bulma is included in our project from the install but not being loaded by Nuxt. Our next step is to include the sass files instead of the css.

We can achieve this by adding the following to the ‘Global CSS’ section of the ‘nuxt.conf.js’ file:

css: [{ src: 'bulma/bulma.sass', lang: 'sass' }],

But by doing this all we are achieving is loading in the base sass to be compiled. It still isn’t going to give us access to the Bulma SASS variables.

We can give ourselves access to these variables by creating a separate stylesheet in our assets folder. I’ve called this ‘main.scss’. In this file we are going to add the following:

/* Import Bulma Utilities */
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

/* Variable changes go here */

// Colours
$primary: #d0eeed;
$secondary: #d0e0ee;

// Breakpoints
$tablet: 724px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);

/* Import the rest of Bulma */
@import '~bulma';

As you can see, we’ve imported the Bulma variables and functions, made the changes that we want to make and then imported Bulma framework. Now to let Nuxt know what to do with it.

Back in our ‘nuxt.conf.js’ file we overwrite the Global CSS import we created earlier and replace it with this:

css: [{ src: '~/assets/main.scss', lang: 'scss' }],

After rebuilding the server you should have full access to Bulma.

Extra – installing Bulma using NPM

To install Bulma as a production dependency navigate to the root of your project install and type:

npm i -P bulma

Then follow the steps mentioned above.

Extra – installing Fontawesome using NPM

Similarly to installing Bulma as a production dependency, we can do the same with Fontawesome:

npm i -P font-awesome

Extra – SASS development dependencies (thanks DDevine)

It has been kindly suggested in the comments that if you are having trouble building then you should make sure that you have the correct SASS dependencies installed.

npm install node-sass sass-loader -–save-dev

  1. Mr.Dave says:

    You saved me after hours of struggle.

    thank you

  2. Amir says:

    Thank you, I spent like 45 minutes trying to figure it out from other sources!

  3. DDevine says:

    The final nuxt.config.js css configuration should look like:

    css: [{ src: ‘~/assets/main.scss’, lang: ‘scss’ }],

    “src” was missing.

    Also, if your project is failing to build make sure you have the SASS development dependencies or else it can’t load the modules it needs to generate.

    # npm install –save-dev node-sass sass-loader

    1. Gav says:

      Thank you! I’ve added your fix/suggestion to the post.

  4. Grant Smith says:

    Great article thank you.

    Has anyone else noticed you cannot use responsive breakpoints using this method? If I add +tablet it forces an error because of the mixins not being imported until `@import ‘~bulma’;`. However, if I include `mixins.sass`, I have to include `derived-variables.sass` as mixins refers to derived variables.

    This results in the Bulma variables being more important than my overrides.

    Bit of a pain…

    1. Gav says:

      Hi Grant

      Try using the responsive mixins after the bulma import:

      // Breakpoints
      $tablet: 700px
      $desktop: 1000px
      $widescreen: 1152px + (2 * $gap)
      $fullhd: 1344px + (2 * $gap)
      /* Import the rest of Bulma */
      @import '~bulma'
              background-color: red
              background-color: orange
              background-color: yellow

      1. Grant Smith says:

        Hi Gav,

        Thanks so much for this. Very helpful

  5. Franklin Vieira Vidal says:

    Thanks, help me a lot.

  6. Rod says:

    Just a heads up I switched from LibSass (node-sass) to the new Dart Sass because I don’t like npm warning messages 🙂

    So instead of running.

    npm install node-sass sass-loader

    Run the following.

    npm install sass sass-loader

    And everything worked perfectly.

    Thank you for the tutorial.

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!