如何防止Vue全局CSS多次覆盖自身

Question

在我的Vue项目中，我有一些全局定义的CSS，例如重置文件等。 我在vue.config中使用以下命令加载此CSS：

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

当我查看浏览器样式时，css似乎会覆盖自身50多次。

我想知道是什么导致了这种行为？

Answer 1

在您的vue.config.js中仅放置变量，mixins，函数。

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'

Answer 2

您的全局样式文件将附加在router.js导入的每个组件的样式块之前。

结果，同一个CSS类的定义很多，看起来好像它们已被覆盖。

一种减少混乱的简单方法是启用组件的延迟加载，如此处文档中所述-> https://router.vuejs.org/guide/advanced/lazy-loading.html

要实现此目的，您只需要更改router.js中的import语句，就绝对不需要在其他任何地方进行更改。

如果我举一个愚蠢的例子：

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

将成为

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