element-plus主题配置

element-plus主题配置

先上官网：主题

本篇文章会讲述，我是如何根据官方教程进行element-plus的主题配置的，以及遇到的坑，和坑的解决方法。

首先，我们需要创建自己的主题文件，/src/styles/element.scss（文件名随意）

根据官网，调整我们的主题：

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary': ('base': #3A9BFF)
  ),
  $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，重启项目，所有的主题配置就都生效了。