Подключение стилей глобально во vue?

Question

[Алексей Орлов]

Создал в assets директиву styles с файлом main.styl, в который делаю импорт глобальных стилевых файлов (шрифты, сетка, переменные, миксины, сбросы). Но файлы работают лишь в стилях компонента (scoped), но не глобально.
main.styl подключаю автоматически во vue.config.js:

const path = require('path')

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

При этом если сделать импорт данного файла в main.js, либо убрать scoped, то всё работает, но происходит дублирование и повторение стилей. И стили подключаются столько раз, в скольких компонентах они находятся. (Пример на картинке, внутри одинаковые стили).



Как исправить данную проблему, чтобы глобальные стили работали независимо используются они в компонентах или нет?

Answer 1

[Алексей Орлов]

UPD. Нашел решение, подключить файлы с шрифтами и сбросом непосредственно в App.vue. Остальные оставить в main.styl, которые будут подключаться по надобности в компонентах. Такое решение правильное?