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

非常困、苦恼，搞了两天，一直 问 ai ,他也不知道
还是得看csdn
方案一：
https://blog.youkuaiyun.com/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