Load SASS and Bulma to your Vue JS project

Introduction

According to docs Bulma is highly customizable thanks to 419 Sass variables living across 28 files.

These variables exist at 4 levels:

• initial variables: global variables with literal values
• derived variables: global variables with values that reference other variables, or are computed
• generic variables: for the HTML elements which carry no CSS class
• element/component variables: variables that are specific to a Bulma element/component

In this case we are gonna add SCSS files to our existing project made with the webpack template via vue-cli, so maybe if you create your project in different way this may not work.

Strategy

To customize Bulma, you will need to:

   vue create my-awesome-project 
   npm install bulma

After that let's install the SASS dependencies:

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

If you have a vue.config.js you will add a few lines, otherwise you need to create this file in the root of your project (next to package.json). As you know we can manage our vue app from this file, the css.loaderOptions.css is one of those many options of this file and allow us to setup the internal configuration of vue-loader.

 module.exports = {

  css: {

    loaderOptions: {

      sass: {

        data: `

         @import "@/scss/_main.scss";

        `

      }

    }

  }

};

Adding this all the code in "_main.scss" will be available in the global scope

After that we create the folder scss inside the src directory also we need to create the _main.scss file

Now we simply import from bulma the files that our project require for example:

 @charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Monda&display=swap');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
$family-sans-serif: 'Julius Sans One', Sans-Serif;



// Update some of Bulma's component variables



// Import only what you need from Bulma
@import "./node_modules/bulma/sass/utilities/_all.sass";
@import "./node_modules/bulma/sass/base/_all.sass";
@import "./node_modules/bulma/sass/elements/_all.sass";
@import "./node_modules/bulma/sass/helpers/_all.sass";
@import "./node_modules/bulma/sass/layout/_all.sass";
@import "./node_modules/bulma/sass/components/navbar.sass";

Now you can see the changes in your localhost. At this point I had a problem but after reading a little bit I discoverd that the webpack version and the sass-loader version weren't compatible so you can downgrade your sass-loader version and everything is gonna be ok.

That's it

I hope your find this usefull as it was for me

Regards