Ceyhun's Dev Blog

Load a Global Scss File in Vue 3

Loading scss into our Vue projects can be a little tricky. Especially with the webpack compatibility issues with sass-loader.

In this post we’re going to learn how to use scss files globally in a Vue 3 app using Vue CLI 4.

Before we move on, make sure to install Node.js on your system. Vue CLI 4 requires version 8.9 or above.

Installing Vue CLI 4

Run the command below to install Vue CLI 4 globally.

npm install -g @vue/cli

Creating our Vue App

When Vue CLI 4 installation is finished, create a project called my-app. ( or whatever you prefer. )

vue create my-app

selecting-setup-step-1

selecting-setup-step-2

selecting-setup-step-3

selecting-setup-step-4

After your setup is complete you can go to your project folder, and type npm run serve to preview the Vue app.

http://localhost:8080/

selecting-setup-step-5

Folder Structure of the Project

After our application is alive and running, we can now create our colors.scss file under assets folder.

folder-structure

Creating Color Variables

In colors.scss file let’s create variables for red, green and black colors.

// RED
$red: #b22222;

// GREEN
$green: #76ff7a;

// BLACK
$black: #000;

Installing sass and sass-loader

As default, Vue CLI 4 uses webpack 4 as a webpack version, which has compatibility issues with the latest sass-loader version. To work around that, we are going to install specific version of the sass-loader. You can also check the docs for this issue.

npm install -D sass-loader@^10 sass

Creating vue.config.js File

With the help of vue.config.js file we can use our variables, mixins, fonts etc. all across our components. That way, we don’t have to manually import necessary features into every single component.

Now, let’s create one in the root folder of our application.

vue-js-config-file

Configuring vue.config.js File

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/scss/colors.scss";`
      }
    }
  }
}

Here, we set the internal configuration for the webpack loader, and loaded our colors.scss file globally. That way, we can access it from each component in the application.

Using Color Variables in a Component

In App.vue component our current styling is like this.

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

By adding lang="scss" attribute to style tag, we can now use our stylings as below.

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1 {
  color: $red;
}

h3 {
  color: $green;
}

li {
  background-color: $black;
}

</style>

Restarting Dev Server

Sometimes development server doesn’t pickup the changes right away. Make sure to restart the dev server before checking the end result.

We now can see that stylings are applied to h1, h3 and li elements.

vue-cli-end-result

Vue 3 Sass Integration Cheatsheet

Next time you use scss in your Vue 3 app, follow this steps to integrate it into your workflow.

vue-cli-end-result

#scss #css #vue.config.js #vue-3 #vue-3-project-setup #vue-cli-4 #vuejs