Automatically import SASS/SCSS into every Vue.js component

Have you ever wanted to import SCSS files into every Vue.js component automatically? This article will show you how to do so with Vue CLI 4, 3, and 2.

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!

IMPORTANT DETAILS:

The methods below 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.

Vite:

  • You should already have a vite.config.js file. If not, create one.
  • Add your import statement to the ViteConfig.css.preprocessorOptions.scss.additionalData property.
  • The file should look something like this:
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/_shared.scss";`
      }
    }
  }
})

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")
  }
})

Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.


Originally published on austingil.com.

2 Comments

Comments are closed.