时间戳

首页 > 解决方案 > 如何防止Vue全局css多次覆盖自身

webpack - 如何防止Vue全局css多次覆盖自身

问题描述

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

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

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

截屏

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

标签： webpacksassvuejs2

解决方案

在你的 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'

推荐阅读