Adding Global Sass Files - gecko-8/devwiki GitHub Wiki

Up

1. Inside your src folder, add a folder called "styles".
2. Add a .scss file in that folder (we'll use _variables.scss in this example).
3. Open your vue.config.js file at the root of your project (create it if necessary).
4. Add the following loaderOptions entry to the file:

   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           prependData: `@import "@/styles/_variables.scss";`
         }
       }
     }
   };
   

5. If you have it running, shutdown and restart the development server.

IMPORTANT: this data will be imported to every component so only use this method for content that doesn't get rendered (e.g. variables, mixins, and functions)