问题描述

按需引入element组件时，需要单独引入该组件的样式文件。

因为已使用unplugin-vue-components插件，只在使用不需写到template上的组件时，才需要单独引入组件样式文件。如ElMessageBox、ElMessage、ElLoading。

  1. // xxx.vue
  2. import { ElMessageBox } from 'element-plus';
  3. await ElMessageBox.confirm('是否离开当前页面？', {
  4.     confirmButtonText: '确定',
  5.     cancelButtonText: '取消',
  6. });
  8. // main.ts
  9. import 'element-plus/theme-chalk/src/message-box.scss';

解决方案

使用unplugin-element-plus插件
image.png

  1. 安装

    1. npm i unplugin-element-plus -D

  2. 配置： ```javascript // vite.config.ts … import ElementPlus from ‘unplugin-element-plus/vite’; …

export default defineConfig({ plugins: [ … ElementPlus({ / 默认为false，转换后路径为：import ‘element-plus/es/components/xxx/style/css’， 该路径会影响覆盖element样式变量 设置为true后，路径改为：import ‘element-plus/es/components/xxx/style/index’ / useSource: true, }), ], … }); ```

注意

  • 若node版本较低（如14.17.3），会出现以下报错。需使用较新node版本（如16.13.1）

ce2330fc-9389-4bbe-b987-d40ac887f344.png

参考链接：https://github.com/element-plus/unplugin-element-plus#readme