element-plus 更换主题色

element-plus 更换主题色

场景：

简单的定制主题色，并不需要有按钮切换主题色。

实现：

在项目中新建你的theme.scss，代码如下：

// style/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #4c8bff,
        ),
        'success': ('base': #13CA50,
        ),
        'error': ('base': #F12B2B,
        ),
    ));

// 所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

这里只写了我需要的，具体的scss变量可以参照 源码里的var.scss 修改。

然后在你的项目入口文件中，导入这个样式文件以替换 Element Plus 内置的 CSS：
去除原来的 import 'element-plus/dist/index.css' ，替换成你自己的 import './css/theme.scss'

参照 官方文档