vue3+vite+ts+element-plus, 自定义主题

我项目使用vite，并且在按需导入时自定义主题。
项目依赖：

"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.0",
"crypto-js": "^4.1.1",
"echarts": "^5.4.0",
"element-plus": "^2.2.25",
"pinia": "^2.0.26",
"vue": "^3.2.45",
"vue-router": "^4.1.6"

一、通过SCSS变量更换主题色

我项目使用了SCSS，theme-chalk也是使用SCSS编写而成，因此可以直接修改Element Plus的样式变量。在packages/theme-chalk/src/common/var.scss文件中可以查找SCSS变量。

1、新建一个样式文件，

例如： src/assets/styles/element/index.scss

/* 只需要重写你需要的变量即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

上面index.css的内容引用自element Plus官网。
注意：最后一部分需要，并不是按官网所说按需导入可忽略。

2、使用scss.additionalData来编译所有应用 scss 变量的组件。

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// element plus按需自动导入组件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// 按需导入element组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import path from 'path'

const postCssPxToRem = require("postcss-pxtorem")
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0' // 通过ip+port访问服务器
  },
  plugins: [
    vue(), 
    vueJsx(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],      
      resolvers: [
        ElementPlusResolver(), // 自动导入Element Plus相关函数，如：ElMessage, ElMessageBox... (带样式)    
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon', // 
          // extension: 'jsx',
        }),        
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),  
        // 自动注册图标组件
        IconsResolver({
          // prefix: 'i', // 默认前缀i, false, 就可不是用前缀
          // 实际上使用的时候，要加上 i-ep- 前缀，并推荐改成短横线命名
          // 
          // {prefix}-{collection}-{icon}
          // this is optional, default enabling all the collections supported by Iconify
          enabledCollections: ['ep']  // element-plus图标库
        })        
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
      // compiler: 'jsx', // or 'solid' 不知是不是与有关
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) //  resolve(__dirname, 'src'),
    }
  },
  css: {
    preprocessorOptions: {
      scss: {       
        additionalData: '@use "src/assets/styles/element/index.scss" as *;',
      },
    },
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 64, // 1rem的大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    },
  
  },
})

二、通过 CSS 变量设置

element用css变量重构了几乎所有组件的样式系统。
它兼容SCSS变量系统。element使用SCSS的函数自动生成需要用到的css变量。
可以动态地改变组件内的个别变量，以便更好地自定义组件样式，而不需要修改SCSS文件重新编译一次。
之后，每个组件的css变量名称和作用将被写入到对应的组件文档中。
就像这样：

:root {
  --el-color-primary: green;
}

如果只想自定义一个特定的组件，只需为某些组件单独添加内联样式。

Tag

出于性能原因，更加推荐在类名下添加自定义 css 变量，而不是在全局的 :root 下。

.custom-class {
  --el-tag-bg-color: red;
}

如果您想要通过 js 控制 css 变量，可以这样做：

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')

比如：修改按钮字体颜色

.el-button--primary {
    --el-button-text-color: var(--el-color-success);
    // --el-button-text-color: #00ff00;
}