最新版本element plus 自訂主題 scss variables

最近將element plus 升級到最新版(1.1.0-beta.9)之後，發現之前設定的顏色變數竟然不起作用了。

先來看看原本使用的變數寫法：

/* 改变主题色变量 */
$--color-primary: #fa3f74;
$--color-white: #fff;

//...

$--font-path: "~element-plus/lib/theme-chalk/fonts";
@import "~element-plus/packages/theme-chalk/src/index";

完全照著官網的建議寫的，看起來毫無破綻，在更新之前也確定是可以使用的。

後來去翻了他們的變數檔案：node_modules/element-plus/packages/theme-chalk/src/common/var.scss

原來是寫法改了

@use "sass:math";
@use "sass:map";

@import '../mixins/config';

// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1

// types
$--types: primary, success, warning, danger, error, info;

/* Color
-------------------------- */
$--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
);

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

//...

那好吧就也只能照他寫法囉～

原檔案更新如下，直接去改這邊的色碼吧！

@use "sass:math";
@use "sass:map";

/* Color
-------------------------- */
$--colors: () !default;
$--colors: map.deep-merge(
  (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #007bff,
    ),
    "success": (
      "base": #67c23a,
    ),
    "warning": (
      "base": #e6a23c,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #f56c6c,
    ),
    "info": (
      "base": #909399,
    ),
  ),
  $--colors
);

/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-plus/theme-chalk/fonts";
@import "~element-plus/packages/theme-chalk/src/index";