vue 项目全局修改element-ui的样式/主题颜色

2023-06-15,,

一,安装sass

1 npm i sass sass-loader --save

二,安装element主题生成工具

// 全局安装
npm i element-theme --save
// 安装主体工具,注意没全局装
npm i element-theme -D

三,安装chalk主题

1 npm i element-theme-chalk -D

初始化变量文件 (如果第二步是全局安装执行1,如果第二步是局部安装执行2)

1. 全局安装,在根目录下,打开git命令工具,输入et -i
   在根目录下面,会自动生成 element-variables.scss 文件

 2. 没有全局安装,所以要换个命令 ./node_modules/element-theme/bin/element-theme -i

./node_modules/element-theme/bin/element-theme -i
执行初始化命令,在项目根目录生成element-variables.scss

 3,修改css变量(每次修改都要执行)

假设我要把 button 中primary类型的背景颜修改为红色

修改完成之后,在git命令工具中输入 et 或者是 ./node_modules/element-theme/bin/element-theme 参考 1,2 步骤

编译完成后,会在本地根目录生成 theme 文件夹

 4. 在main.js中引入 编译过的index.css

然后引入自定义主题

vue 项目全局修改element-ui的样式/主题颜色的相关教程结束。

《vue 项目全局修改element-ui的样式/主题颜色.doc》

下载本文的Word格式文档,以方便收藏与打印。