Connecting styles globally in vue?

  • 0
    I created a 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 connect main.styl 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')

    Moreover, 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 included as many times as in how many components they are in. (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?
    Vue.js Arya Bass, Jan 7, 2019

  • 1 Answers
  • 0
    UPD. Found a solution, connect files with fonts and reset directly to App.vue. Leave the rest in main.styl, which will be connected as needed in components. Is this decision correct?
    Penelope Church

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!