Connecting styles globally in vue?

Question

Vue.js

I created the styles directive in assets with the main.styl file, into which I import global style files (fonts, grid, variables, mixins, resets). But files only work in component styles (scoped), not globally.
I include main.style automatically in vue.config.js:

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, './src/assets/styles/main.styl')
      ]
    }
  }
}

At the same time, if you import this file into main.js, or remove scoped, then everything works, but there is duplication and repetition of styles. And styles are connected as many times as they are in components. (Example in the picture, inside the same styles).



How to fix this problem so that global styles work regardless of whether they are used in components or not?

Answer 1

UPD. I found a solution, connect files with fonts and reset directly in App.vue. Leave the rest in main.styl, which will be connected as needed in the components. Is this decision correct?