element-plus 组件 ElMessage、ElLoading 弹框 和加载css 样式展示异常总结

非常困、苦恼，搞了两天，一直 问 ai ,他也不知道
还是得看csdn
方案一：
https://blog.csdn.net/qq_44603011/article/details/135414801
原理： 因为 - 使用了element plus的按需引入后
操作：直接删除 页面的手动引入
结果：出现报错 找不到组件-vue3 ts 环境语法，但是项目可以运行

方案二：在方案一基础上 继续处理报错，强迫症
原理：组件不显示或样式丢失，ElLoading/ElMessage 属于 全局 API 式组件，需要特殊处理引入方式：修改vite.config.ts AutoImport 配置，代码如下：

// vite.config.tsimport { defineConfig } from \'vite\'import AutoImport from \'unplugin-auto-import/vite\'import Components from \'unplugin-vue-components/vite\'import { ElementPlusResolver } from \'unplugin-vue-components/resolvers\'export default defineConfig({ plugins: [ AutoImport({ resolvers: [ ElementPlusResolver({ // 关键配置：自动导入样式文件 importStyle: \'sass\',  // 解决 ElMessage 等 API 式组件 directives: true,  version: \'2.6.4\' // 与安装版本一致 }), ], // 生成自动导入的 .d.ts 文件 dts: \'src/types/auto-imports.d.ts\' }), Components({ resolvers: [ ElementPlusResolver({ importStyle: \'sass\', version: \'2.6.4\' }) ], // 生成组件声明的 .d.ts 文件 dts: \'src/types/components.d.ts\' }) ]})

到这一步基本就解决了

方案三： (推荐)
原理：css 样式异常
原因：css sass 插件兼容问题，
操作：优先只安装 sass-embedded，如果需要 也可以 同时 安装 sass --save-dev
但是必须要安装 sass-embedded ,安装后一切正常。

支持 cnpm 使用这个

cnpm install sass --save-devcnpm install -D sass-embedded

不支持 cnpm 使用这个

npm install sass --save-devnpm install -D sass-embedded

有问题 欢迎入群交流：QQ 926055344