element-plus 引用loading编译不通过解决方案【迷糊小苦瓜 -掘金同名】

安装element-plus自动引入后再使用loading时出现css文件引入问题导致编译不通过如下

啊这个问题在使用灵活的双手， 在百度后得知可以使用如下解决方案：

方案1:

 AutoImport({
   resolvers: [ElementPlusResolver({ importStyle: true })],
 }),
 Components({
   resolvers: [ElementPlusResolver({ importStyle: true })],
 }),

我不太理解为什么要这样配置，importStyle 都设置为false后样式不生效以至于loading的问题没解决，还出现了别的样式问题，如下：

方案2:

手动引入样式，loading的api可以使用，但是指令还是不行。目前过渡的解决方案是，自己定义一个全局指令，对ElLoading.service再包一层，就可以使用了。不知道有没有更好的办法？

app.directive("rsvp-loading", { updated(el, binding) { if (binding.value && !loadingInstance) { loadingInstance = ElLoading.service({ target: el, lock: true, text: "数据加载中", }); } if (!binding.value) { loadingInstance.close(); } }, });

这个由于我自己也没有使用所有就不放效果图，感兴趣的可以自己试一下

方案3:

依旧是修改vue.config配置文件

require("unplugin-auto-import/webpack")({
  resolvers: [ElementPlusResolver({ importStyle: false })],
}),
require("unplugin-vue-components/webpack")({
  resolvers: [ElementPlusResolver()],
}),

将element-plus自动按需引入改成如上所示即可，效果图如下

那么综上所述 element-plus loading就可以正常使用了，何不快速尝试一下，如果还有问题请参考
element-plus/element-plus/issues/4855