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";
重新运行就可以看到效果了。