08月16, 2021

Element-plus 样式重构

背景

按照element-plus 官网说明自定义样式后未生效。

分析

对比生效版本,发现 theme-chalk 版本有问题,对比element-plus版本后发现, 1.0.2-beta.54 与 1.0.2-beta.70 中,对var.scss处理不同。 70中对theme chalk包进行了重构。传入的变量变成了map类型。

解决

方案一

可通过锁定版本解决,样式覆盖方式与之前相同。

package.json
"element-plus": "1.0.2-beta.54",

方案二

新的element-plus版本,scss使用了sass的map新特性,需要修改样式覆盖方式。 element-variable.scss

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';
$--font-size: (
  'extra-large': 20px,
  'large': 18px,
  'medium': 16px,
  'base': 12px,
  'small': 12px,
  'extra-small': 12px,
);
@import "~element-plus/packages/theme-chalk/src/index";

其他

Element-plus新的css变量赋值方式

Refs

  1. sass maps https://sass-lang.com/documentation/values/maps
  2. css可通过:root 伪类定义全局变量,支持其他选择器引用变量 https://developer.mozilla.org/en-US/docs/Web/CSS/--*
  3. Element-plus 从第v56版本开始重构css a. release:https://github.com/element-plus/element-plus/releases/tag/1.0.2-beta.56
    commit https://github.com/element-plus/element-plus/pull/2622/commits/568d09ba49782006b31b553a32085cf1e01ee5c6

本文链接:http://fengbaiyang.cn/post/element-plus.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~