elementPlus 定制化样式

导读：在使用elementPlus组件库的过程中，可以自定义样式（比如主题色）修改默认样式，导入定制化样式文件进行样式覆盖

1、新建样式文件

1.1 新建 styles/element/index.scss 自定义项目主题色

// 重写项目主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #27ba9b,
    ),
    'success': (
      'base': #1dc779,
    ),
    'warning': (
      'base': #ffb302,
    ),
    'danger': (
      'base': #e26237,
    ),
    'error': (
      'base': #cf4444,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

1.2 新建 styles/var.scss 变量文件

一些自定义的颜色变量

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;

1.3 新建 styles/common.scss 重置样式

// 重置样式
* {
  box-sizing: border-box;
}

// 其他默认样式

2、修改配置文件 vite.config.ts

import { defineConfig } from 'vite'

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // 省略...
    Components({
      resolvers: [
        // 1、配置ElementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: 'sass' }),
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 2、自动导入定制化样式文件进行样式覆盖
        additionalData: `
        @use "@/styles/element/index.scss" as *;
        @use "@/styles/var.scss" as *;
        `,
      },
    },
  }
})

3、应用一下

p {
    color: $xtxColor;
}