How to use Sass globally in a Vue.js project without @import

Let’s say you are working on an awesome new Vue.js app that you’re super excited about. You even wrote some snazzy little Sass to go with it; plenty of variables, cool mixins, and helpful functions. There’s just one problem…

In order to use those sweet Sassy features, you have to manually @import them into each component’s style block. As your application grows, you will soon realize how painful this process is.

Wouldn’t it be nice if you could just provide those functional Sass files globally without having to manually import them? Good news, you can! There is no automatic way to do this because each project might be different, but it’s not much code at all.

Vue CLI 3:

  • Create a file called vue.config.js (if you do not already have one)
  • Add the followig lines:
    module.exports = {
      // ...
      css: {
        loaderOptions: {
          sass: {
            data: `@import "@/_shared.scss";`
          }
        }
      }
      // ...
    };

Vue CLI 2:

  • Open the file called¬†/build/utils.js
  • Find the line containing scss: generateLoaders('sass')
  • Replace it with the following:
    scss: generateLoaders("sass").concat({
      loader: "sass-resources-loader",
      options: {
        resources: path.resolve(__dirname, "./src/_shared.scss")
      }
    })

Things to keep in mind:

Both methods above assume you are storing your shared Sass in a file at /src/_shared.scss. If your project uses a different file name or folder, adjust accordingly.

These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, create a separate file and import it into your main App.vue file instead.