ElementPlus主题色的定制

目录

1 前言

2 操作步骤

2.1 安装Sass

2.2 准备定制文件

2.3 覆盖ElementPlus原本主题色

---

1 前言

ElementPlus自带的主题色可能并不符合我们的项目所需，因此我们需要去定制主题色来满足我们的需求，具体操作步骤如下。

2 操作步骤

2.1 安装Sass

在控制台执行如下指令：

npm i sass -D

2.2 准备定制文件

准备一份定制文件(index.scss)，内容大致如下，把它放在src/styles/element/下(没有文件夹就创建)

/* 只需要重写你需要的即可 */
@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,
    ),
  )
);

2.3 覆盖ElementPlus原本主题色

在vite.config.js文件中添加/修改如下内容：

原文件内容：

//其它内容
export default defineConfig({
  plugins: [
    //其它内容
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //其他内容
})

添加修改后的：

 

export default defineConfig({
    plugins: [
        //其它内容
        Components({
            resolvers: [
                // 1. 配置elementPlus采用sass样式配色系统
                ElementPlusResolver({importStyle: "sass"}),
            ],
        }),
    ],
    //其它内容
    css: {
        preprocessorOptions: {
            scss: {
                // 2. 自动导入定制化样式文件进行样式覆盖
                additionalData: `
                  @use "@/styles/element/index.scss" as *;
                `,
            }
        }
    }
})