Importing Scss into vue.js views

Question

I've noticed that if I want to use my _variables.scss I have to import them in every Vue file. My question is, how can I check if I load the same styles multiple times or does Vue saves only once the same scss files on compiling?

This is my code in multiple view files.

<style lang="scss" scoped> @import '~@/abstracts/_variables.scss'; @import '~@/pages/_profile.scss'; </style>

I import _variables.scss in every view where I want to use my scss variables.

You could import it in `main.js` or some files at the top of the chain (where you instantiate Vue). — kissu, Dec 18 '22 at 18:12

score 1 · Accepted Answer · edited Dec 19 '22 at 01:22

This depends on how you have your project setup, for example if you're using webpack you can do something like this where you have your CSS loaders setup:

scss: generateLoaders('sass', {
  additionalData: `
      @import "@/styles/_variables.scss"
    `,
}),

Or if you have a vue.config.js you can do this:

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

Then you will have access to this global SCSS file everywhere in your Vue application.

Side note on the additionalData portion - that will depend on the version of sass loader you're using:

For ^7.x.x use data, and for ^8.0.2 use prependData, finally for 9.0.0+ use additionalData

Importing Scss into vue.js views

1 Answers1