定制主题色（改变elementplus默认颜色）_elementplus修改默认主题色

1.安装sass

npm install sass -D

2.在styles文件夹下新建element文件夹，在element文件夹下新建index.scss文件，并写入以下代码（可按照自己项目的主题颜色修改配置项）

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

3.对elementPlus样式进行覆盖。在vite.config.js文件中修改以下内容（看图片粘贴代码到对应位置）。

// 配置elementPlus采用sass样式配置系统
ElementPlusResolver({ importStyle: "sass" }),
 
css: {
  preprocessorOptions: {
    scss: {
      // 自动导入定制化样式文件进行样式覆盖
      additionalData: `
        @use "@/styles/element/index.scss" as *;
      `,
    }
  }
}

 效果图（第一张为elementplus默认颜色，第二张为修改之后）：