CDN引入 Element Plus 自定义主题色

2024-05-29
1459
阅读4分钟

背景

老项目需要引入Element Plus组件库，但是是使用CDN引入的，且需要修改主题色。可以先修改组件库源码主题色，再打包，引入打包出CSS文件即可。

具体步骤

1. 拉取源代码

git clone https://github.com/element-plus/element-plus

2. 安装依赖

如没有pnpm，需要先安装pnpm

pnpm install

3. 修改主题色

修改element-plus-dev\packages\theme-chalk\src\common\var.scss目录下的主题色

/* Element Chalk Variables */
@use 'sass:math';
@use 'sass:map';

@use '../mixins/function.scss' as *;

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

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #409eff, // 修改此行的主题颜色
    ),
    // ...
  ),
  $colors
);

4. 打包

源码提供打包主题的命令，如下

pnpm build:theme

引入文件

打包后的文件在element-plus-dev\packages\theme-chalk\dist\index.css中，在html文件中引入即可。

评论