I'm new with Vue.js.

I have to implement a small web-application and I took the opportunity to study and take familiarity with Vue.js.

I have a doubt about the styles.

First of all I would like to use SCSS and I configured my project in this way: I created some scss files about the commons rules (eg buttons, media queries, etc). All files are included into a single file shared.scss

In order to avoid to include it a lot of time I added this configuration into the file vue.config

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

For each component (as also for my app.vue) I have a dedicated style tag where I put the scss rules related to the specific component:

<style lang="scss" scoped>

Is this a valid approach? Could it be better/possible to include a scss file for each component? What's the approach that it's used for production projects?