0

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:

enter image description here

Lucas David Ferrero
  • 1,630
  • 14
  • 40
  • Was there a problem when trying to use the variables in your components? – Dan Nov 25 '20 at 23:14
  • Yes, It was. Actually none of the styles that I defined in SASS folder were working but now I've solved. – Lucas David Ferrero Nov 25 '20 at 23:19
  • Hmm, they don't generally require a 3rd party plugin. Quite possibly configured wrong in the sass loader – Dan Nov 25 '20 at 23:26
  • https://cli.vuejs.org/guide/css.html#automatic-imports – Lucas David Ferrero Nov 26 '20 at 16:58
  • Thanks, yeah, it seems [that tool](https://github.com/yenshih/style-resources-loader) is recommend for *automatic* imports (though it hides what files are being imported, complicates the config, and requires an extra package that may or may not get updates). My comment was more about the idea that it isn't necessary to use a 3rd party tool to get your SASS working. – Dan Nov 26 '20 at 17:12

1 Answers1

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'),
      ]
    }
  }
}
Lucas David Ferrero
  • 1,630
  • 14
  • 40