[vue3] personalización del color del tema de elementPlus

Tome el lenguaje scss como ejemplo.

1. element-plus importa configuraciones automáticamente a pedido, puede consultar el sitio web oficial para importar módulos a pedido

para instalar element-plus y complementos auxiliares

npm i element-plus --save

Instalar complementos auxiliares

npm install -D unplugin-vue-components unplugin-auto-import

instalar sass

npm i sass -D

2. Configurar en vite.config.js

// vite.config.ts
import {
    
     defineConfig } from 'vite'
//element-plus按需导入
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: [
  vue(),
    // element-plus按需配置
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: 
      //1、配置elementPlus采用sass样式配色系统
      [ElementPlusResolver({
    
    importStyle:"sass"})],
    }),
  ],
  resolve:{
    
    
alias:{
    
    
'@':fileURLToPath(new URL('./src',import.meta.url))
}
},
css:{
    
    
preprocessorOptions:{
    
    
scss:{
    
    
//2、自动导入定制化样式文件进行样式覆盖
additionalData:`@use "@/styles/element-plus/index.scss" as *`
}
}

}
})

Agregue una carpeta de elementos debajo de la carpeta de estilos y agregue index
.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with(
$colors:(
'primary':(
    //主色
    'base':#27ba9b
),
'success':(
    //成功色
    'base':#1dc729
),
'warning':(
    //警告色
    'base':#ffb302
),
'danger':(
    //危险色
    'base':#e26237
),
)
);

3. Importe automáticamente la configuración
1. Agregue {importStyle: "scss"} al elemento de configuración de complementos en vite.config.ts

2. Agregue datos adicionales al elemento de configuración scss en vite.config.ts:@use "@/styles/element-plus/index.scss" as *