Vue3---修改elementPlus默认颜色_vue element-plus 修改默认颜色

1. 安装sass：npm install sass -D

2. 新增styles/element/index.scss文件

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary':(
         'base':#27ba9b
    ),
    'sucess':(
        'base':#1dc779
    ),
    'warning':(
       'base':#ffb302
    ),
    'danger':(
        'base':#e26237
    ),
    'error':(
        'base':#cf4444
    )
  ))
;

3. 进入vite.config.js配置文件配置

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