javascript - How do I add a global scss file in Vue.JS that will compile?

Question

I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics.

I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

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

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

Answer 1

to make it simple just use this trick

1. create a file called vue.config.js (if it was not auto-created by vue-cli when you were creating your project)
2. add these code to your created file

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

3. the @ means src dir this means that @/assets is the same as src/assets
4. I assume that you have the main.scss file, where you include all of you sub scss files if you want to know how it is made, take a look here it is really cool to work with it
5. prependData may not work or throw an error the reason why I used these is because I am using "sass-loader": "^8.0.2". here are some useful information

• on "sass-loader": "^7.*.*" try to use data
• on "sass-loader": "^8.0.2" try to use prependData
• on "sass-loader": "^9.0.0" try to use additionalData

6. after that stop server and run it again to load new configurations we made in vue.config.js
7. if you are working with vuetify it may throw an error, so make sure that you match the processor name with the extension, like if you have .scss files you will need to use these configs

scss: { // the change was made here (match the option name with file extension)
  prependData: `
    @import "@/assets/scss/main.scss";
  `
}

if you are using .sass file use these configs

sass: { //the change was made here (match the option name with file extension)
  prependData: `
    @import "@/assets/scss/main.sass";
  `
}