How to integrate custom SASS file and Vue3's SFC (Vue CLI)

Question

I've a SASS architecture where I place all my styles. I just have one SASS file that imports every partial (including variables, mixin, etc). I'd like to know how can I get access to all those styles on each SFC that Vue offer to us, so I can use mixins, variables and more within my SFC.

Lastly, how should this been process? Take all the SCSS and SFC styles and output one CSS file? or using the style-loader? I'm using Vue-CLI 4 and Vue.js 3.

Here is how my architecture looks so far:

Answer 1

This problem was solved by using Automatic Imports. With this we have access to all variables, mixins,etc on each SFC.

First, you install style-resources-loader with the command vue add style-resources-loader, this will ask you what kind of preprocessor you're using.

After that you have to tell the loader where is the file/files you want to import on every SFC. You achieve that by changing the vue.config.js (if you don't have it yet, create it at the root of your project). Then you add:

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'scss',
      'patterns': [
        path.resolve(__dirname, './src/sass/global.scss'),
      ]
    }
  }
}