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

一,安装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

然后引入自定义主题

原文地址:https://www.cnblogs.com/shun1015/p/14486975.html