Automatically import SASS/SCSS into every Vue.js component

If you’ve done any work with Vue.js and SASS (or SCSS from here on), you may have run into this a very common issue. You have SCSS variables in one file that you want to make available to your Vue components.

The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue’s single file components you can simply add lang="scss" to the <style> block (docs).

The bad news is in order to use your sweet Sassy variables (or mixins and functions), 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.

<style lang="scss">
@import '@/path/to/variables.scss'

/** ... */
</style>

Wouldn’t it be nice if you could just provide those functional SCSS files globally without having to manually import them? Good news, you can!

Vue CLI 4:

• Create a file called vue.config.js (if you do not already have one)
• Add the following lines:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

Note that if you are upgrading a project from Vue CLI 3, then you may run into the issue:

Sass Loader has been initialised using an options object that does not match the API schema.

In which case, you may have an outdated config file. See the next section for Vue CLI 3 regarding the sass-loader versions.

Vue CLI 3:

• Create a file called vue.config.js (if you do not already have one)
• Add the following lines:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

UPDATE: If you have upgraded sass-loader, you may run into an issue:

Sass Loader has been initialised using an options object that does not match the API schema.

The solution is to replace data in the options above with prependData for version 8, and additionalData for version 9.

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.

And if you thing other folks might find this content useful, please share it, and sign up for the newsletter to get notified when new articles come out.