vue3+vite配置elementPlus主题需要安装一下两个插件:
- unplugin-vue-components
- unplugin-auto-import
开始配置:
第一步、安装插件
pnpm install -D unplugin-vue-components unplugin-auto-import
// 我这里使用pnpm安装,当然大家如果没有配置安装pnpm可以使用npm/cnpm
第二步、配置插件(在vite.config.ts中)
...
/* 自定义elementPlus插件 start */
import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
/* 自定义elementPlus插件 end */
...
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
})
],
...
css: {
preprocessorOptions: {
scss: {
// 一下路径就是我们需要新定义主体的scss文件路径名称
additionalData: `@use "src/styles/common.scss" as *;`
}
}
},
第三步、自定义主体样式
在src目录中创建styles文件夹,新建common.scss文件,写自己的样式。
//固定写法
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'success': (
'base': #29cca0
)
)
);
官网scss写法文档:
https://element-plus.org/zh-CN/guide/theming.html
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。