element-plus主题配置
先上官网:主题
本篇文章会讲述,我是如何根据官方教程进行element-plus的主题配置的,以及遇到的坑,和坑的解决方法。
首先,我们需要创建自己的主题文件,/src/styles/element.scss (文件名随意)
根据官网,调整我们的主题:
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
'primary': ('base':
),
$main: ('padding': 0)
);
然后,我们来修改vite.config.js 配置文件:
import { UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自定义自动引入
import Component from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
import * as path from "path";
// https://vitejs.dev/config/
export default ():UserConfigExport => {
return {
resolve: {
alias: {
"@": path.join(__dirname, './src')
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/element.scss" as *;` // 路径根据配置改变,没有别名就用相对路径和绝对路径
}
}
},
plugins: [...,
// ElementPlus({useSource: true}), // 官方,但非必要
ElementPlus(), // 非官方
Component({
resolvers: [
ElementPlusResolver({
importStyle: 'sass' // 非官方,必要
})
],
dts: 'src/declares/component.d.ts'
})],
...
}
}
根据官方文档,我们配置ElementPlus 插件的useSource 属性为true 。重新启动之后可以发现,主题颜色发生了改变,但是main 的padding 却无效。于是我删除了useSource 的配置。
由于我采用的是自动引入,所以我查看了一下unplugin-vue-components 的官方配置文档。
官方配置文档中有关于element-plus解析器的详细说明,其中importStyle 可以配置element-plus的样式引入方式,它默认是css 。将这个属性设置为sass ,重启项目,所有的主题配置就都生效了。
|