Как предотвратить Vue Global CSS перезаписать себя несколько раз

Question

В моем проекте vue у меня есть некоторые глобально определенные CSS, такие как файл сброса и т. Д. Я загружаю этот CSS, используя следующее в моем vue.config:

css: {
  loaderOptions: {
    sass: {
      data: `
        @import "@/assets/styles/styles.scss";
      `,
    },
  },
},

Когда я смотрю в стилях браузера, этоКажется, что CSS перезаписывает себя более 50 раз.

Мне интересно, что вызывает такое поведение?

Answer 1

Ваш глобальный файл стилей присоединяется перед блоком стиля каждого компонента, который импортирует ваш router.js.

В результате, существует много определений одного и того же класса css, которые выглядят так, как будто онибудучи переопределенным.

Один простой способ уменьшить беспорядок - включить отложенную загрузку компонентов, как описано в документации здесь -> https://router.vuejs.org/guide/advanced/lazy-loading.html

Для реализации этого вам нужнонеобходимо изменить только операторы импорта в router.js, и абсолютно ничего не нужно будет менять где-либо еще.

Если бы я привел глупый пример:

import Foo from "@/src/views/Foo.vue";

станет

const Foo = () => import('@/src/views/Foo.vue');

Answer 2

В ваш vue.config.js помещаются только переменные, миксины, функции.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/sass/_colors.scss";
          @import "@/assets/sass/_variables.scss";
          @import "@/assets/sass/_mixins.scss";
          @import "@/assets/sass/_functions.scss";
        `
      }
    }
}

Теперь в файле styles.scss укажите ваши стили, например:

@import "reset";
@import "base";
@import "fonts";
@import "z-index";
@import "transitions";
@import "util";

В вашем main.js импорт styles.scss

import '@/assets/styles/styles.scss'