ElementUI组件出现大量重复样式

情况

点进去，是一个style标签，里面有六万多行样式进去使用正则查找，发现有11处一模一样的样式

复制代码

^.el-textarea__inner \{

过程

经过简单排查，发现问题在于element-variables.scss这个文件中，我框选的这一条代码。

但是把它注释掉，样式就没了，因为项目引入样式的方式是scss。

于是乎去查看官方文档，确实没啥问题。

于是我起了一个新的vue2+element-ui+scss项目，用同样的方式引入。

结果发现，是一样的，也有重复的样式说明这是Element的问题。

原因

element官方的scss文件中重复定义了样式比如我引入以下样式可以发现有两个重复样式

解决方法

Element早已停更，假如你不是迫不得已，应该停止使用这个UI库。

以下的所有方法都并不是一种优雅的解决方式，但是他们可以解决当前的问题。

解决方法来自github，但是位于以下文章的引用让我发现这个问题。

$vue.js - ElementUI重复引入样式问题 - 学习前端历程 - SegmentFault 思否$ (segmentfault.com/a/119000002...)

令人遗憾的是，这篇文章里的方法根本不起作用。

postcss的cssnano(推荐)

github.com/ElemeFE/ele...

你只需要创建postcss.config.js文件，添加cssnano: {}即可去掉重复的样式。

js 复制代码

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: {}
  },
};

fast-sass-loader(不推荐)

更换依赖为项目引入了额外的复杂性，所以这并不是推荐的方法

核心在于chainWebpack的配置，代码来自如下链接。
github.com/yibn2008/fa...

忽略下面的注释，这是我之前做的尝试。

js 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.module.rules.delete('scss')

    let scssRule = config.module.rule('scss')
      .test(/\.scss$/);

    [
      { name: 'vue-style-loader' },
      { name: 'css-loader' },
      { name: 'postcss-loader' },
      { name: 'fast-sass-loader' }
    ].forEach((load) => {
      scssRule
        .use(load.name)
        .loader(load.loader || load.name)
        .options(load.options || {})
    })
  },
  // configureWebpack: {
  //   module: {
  //     rules: [
  //       {
  //         test: /\.(scss|sass)$/,
  //         use: [
  //           'css-loader',
  //           {
  //             loader: 'fast-sass-loader',
  //             options: {
  //               // includePaths: [... ]
  //             }
  //           }
  //         ]
  //       },
  //       // other loaders ...
  //     ]
  //   }
  // }
})

fast-sass-loader解决了这个问题，但是官方并没有给出vue-cli中的合理使用方式。

我找了很久如何在vue中使用这个东西。

当我直接修改vue中的webpack配置，卸载了sass-loader，完全没有作用。

包括github issue中有部分人也尝试使用这个工具，他们的配置也失败了，说明这不是个例。

编译出css避开问题(不推荐)

假如我要新加一个scss变量呢？

不推荐这种削足适履的方式

我没有尝试这种方式，但这种方式在原理上是可行的，因为他完全避开了问题，当使用css文件时，就不会编译，自然也就不会引发重复样式的问题。

github.com/ElemeFE/ele...
github.com/ElemeFE/ele...

总结

如果可以，我真不想用vue2和element。