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.

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.

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.

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