Vue中ElementPlus与Tailwindcss冲突问题解决

使用ElementPlus 对 [email protected]+ 的插件与Tailwindcss在build时出现顺序冲突

○问题描述

直接 npm run serve 时样式一切正常，build部署到生产环境时 tailwindcss 样式被原本的 elementui 样式覆盖，导致样式错乱。

○原因

tailwindcss与scss兼容性较差，而elementplus提供的插件在安装了scss-loader的情况下使用.scss文件来引入全局样式，导致构建时taiwindcss晚一步被打包，部署后分包请求css时是先进行elementplus的样式请求（包含在了app.xxxxx.css内，所以就选tailwindcss再最后引入也无法改变构建后的顺序）

○解决方案

将src目录下的element-variables.scss文件删除，然后更改src/plugins/element.js内import该文件的那段代码，改为直接引用element-plus/lib/theme-chalk/index.css，然后确保main.js中tailwindcss样式文件在该插件之后引入即可。