1、安装elementPlus,并按需导入
npm install element-plus --save
安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
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()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
按需导入的情况下,自定义主题,并且使用 vite。就可以安装用于按需导入 element-plus 样式的 unplugin-element-plus 插件并进行配置
npm i unplugin-element-plus -D
// 自动按需导入 element-plus 样式
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
})
],
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
})
],
}),
ElementPlus({
useSource: true,
}),
],
})
在ElementPlusResolver({ importStyle: 'sass' }),需要importStyle配置样式引入方式,不然自定义主题无效。
2、创建一个新的styles文件夹,新建index.scss,直接覆盖 Element Plus 样式变量:
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors:(
'white': #ffffff,
'black': #000000,
'primary': (
'base': #17A7FF, // 修改primary base color
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
$font-size:(
'extra-large': 20px,
'large': 18px,
'medium': 16px,
'base': 14px,
'small': 13px,
'extra-small': 12px,
)
);
3、在vite.config.ts中引入
export default defineConfig({
// ...
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/index.scss" as *;`,
},
},
},
})
这里需要配置@,如果没有配置@会报错。
重新运行项目即可。