最新版本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";

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。