前端|记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑 vue.js|前端|sass|html

事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。
于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和element-plus，一切都很顺利，router跳转很成功，ElementPlus引入也没有问题。
但是最终，问题出在了使用上。我从ElementPlus的官方网站copy了一段组件的示例代码，可是样式怎么都不对，上网查了好多，main.js中样式文件也引入了，vue.use(ElementPlus)也加了，可是样式一直都像下面那样！

文章图片

怎么都排查不到原因，最后查来查去，翻到了这篇文章→VUE 引入element ui 样式不生效解决
文章里面说去掉config里面的配置，我试了一下，居然真的可以！！！
这里说一下我的vue.config.js文件是从搭建项目的某个教程中扒过来的，因为上面有不少注释，所以用了那个，结果没想到在这里给自己挖了个大坑！向下面这样去掉css相关的配置样式就正常了！

// css: { //// 启用 CSS modules //requireModuleExtension: false, //// 是否使用css分离插件 //extract: true, //// 开启 CSS source maps，一般不建议开启 //sourceMap: false, //// css预设器配置项 //loaderOptions: { //sass: { //prependData: `@import "@/styles/global.scss"; `, //}, //}, // },

【前端|记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑】重启项目，成功啦啊啊啊啊！