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.ts
import { 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-dev
cnpm install -D sass-embedded
不支持 cnpm 使用这个
npm install sass --save-dev
npm install -D sass-embedded
有问题 欢迎入群交流：QQ 926055344