vue+ElementUI改变主题色

背景介绍:项目使用vue.js+elementUI+scss,但是项目的主题色要修改为紫色。Mac电脑,且已安装过npm。
我使用的是全局安装(-g),官方文档说是建议安装在项目中

全局安装步骤

cd element-demo
npm i element-theme -g
npm i element-theme-chalk -D
et -i
修改scss中的颜色值
et
main.js修改引入

步骤说明

  1. 进入项目文件夹 cd element-demo

  2. 安装主题生成工具npm i element-theme -g

  3. 安装白垩主题(不可以省略)npm i element-theme-chalk -D

  4. 改变初始变量文件et -i,会在根目录下多出一个element-variables.scss文件

  5. 找到element-variables.scss文件,修改主题色变量(primary)和其他要改变的颜色(eg:danger)

    修改primary和danger色值.png

  6. 编译主题et

  7. 引入自定义主题,保存后,就可以看到颜色已变为了你设置的颜色


    引入自定义主题.png
效果.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容