Vue3 setting up global Sass/Scss variables

It's very easy to set up global sass variables in vue3

At first it was a bit messy for me but after running through a lot of methodologies i found this way to work better

Install vue3

you can do this simply if you have Vue CLI, just type vue create sass and select vue3

There is an option to set up CSS pre processors from the CLI tool but for this article I will ignore that option.

Once set up, cd scss to move into that directory.

Adding packages sass-loader and sass

Run npm add -D sass-loader sass and get those two critical packages installed.

To check whether the packages are installed properly or not then you should see <style></style> section of individual component it should change from

This

<style>
 </style>

To this

<style lang="scss">
 </style>

The show is still alive....

Adding global sass config file

Currently, if you want to define global variables you would have to include the file in each vue component:

<style lang="scss">
 @import "./scss/_variables.scss"; // $color-primary would be defined in that file

 .your-component {
   color: $color-primary;
 }
</style>

It is much nicer to include some files globally. For this we must create a vue.config.js.

Just createvue.config.js from the root directory of your vue app, and then update that file with this:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: 
          @import "@/scss/_variables.scss";

      }
    }
  }
};

Also make sure that you update the additionalData string to reference files that you want to include. After doing this, anything in additionalData will be available to use in any of your tags in your Vue components.