element-plus自定义主题颜色无效

element-plus在element-variables.scss中自定义颜色

$--color-primary: hotpink;

你会发现根本不起作用。
是因为common/var.scss相对于原来的版本有所改变

$--color-white: map.get($--colors, 'white');
$--color-black: map.get($--colors, 'black');
$--color-primary: map.get($--colors, 'primary', 'base');
$--color-success: map.get($--colors, 'success', 'base');
$--color-warning: map.get($--colors, 'warning', 'base');
$--color-danger: map.get($--colors, 'danger', 'base');
$--color-error: map.get($--colors, 'error', 'base');
$--color-info: map.get($--colors, 'info', 'base');

上面是现在的，会发现他没有了!default标识，
这会导致直接覆盖我们所设置的样式。
我们网上看$--colors变量

$--colors: () !default;
$--colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $--colors
);

会发现$--colors变量是设置了!default的。
所以我们更改element-variables.scss为

//一定要写不然会报错
@use "sass:math";
@use "sass:map";

//在这里面自定义主题的色彩
$--colors: (
    'white': #ffffff,
    'black': #000000,
    'primary': (
        'base': #efb336,
    ),
    'success': (
        'base': #67c23a,
    ),
    'warning': (
        'base': #e6a23c,
    ),
    'danger': (
        'base': #f56c6c,
    ),
    'error': (
        'base': #f56c6c,
    ),
    'info': (
        'base': #909399,
    ),
);

$--font-path: '~element-plus/lib/theme-chalk/fonts';

@import "~element-plus/packages/theme-chalk/src/index";

重新运行就可以看到效果了。