情况
点进去，是一个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...](https://link.juejin.cn?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000022495821 "https://segmentfault.com/a/1190000022495821")) 令人遗憾的是，这篇文章里的方法根本不起作用。 ### postcss的cssnano(推荐) [github.com/ElemeFE/ele...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement%2Fissues%2F11817%23issuecomment-588127007 "https://github.com/ElemeFE/element/issues/11817#issuecomment-588127007") 你只需要创建`postcss.config.js`文件，添加`cssnano: {}`即可去掉重复的样式。 ```js // postcss.config.js module.exports = { plugins: { autoprefixer: {}, cssnano: {} }, }; ``` ### fast-sass-loader(不推荐) > 更换依赖为项目引入了额外的复杂性，所以这并不是推荐的方法 核心在于chainWebpack的配置，代码来自如下链接。 [github.com/yibn2008/fa...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyibn2008%2Ffast-sass-loader%2Fissues%2F50%23issuecomment-468605882 "https://github.com/yibn2008/fast-sass-loader/issues/50#issuecomment-468605882") 忽略下面的注释，这是我之前做的尝试。 ```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...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement%2Fissues%2F11817%23issuecomment-706243188 "https://github.com/ElemeFE/element/issues/11817#issuecomment-706243188") [github.com/ElemeFE/ele...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement%2Fissues%2F11817%23issuecomment-2789581274 "https://github.com/ElemeFE/element/issues/11817#issuecomment-2789581274") ## 总结 如果可以，我真不想用vue2和element。