背景介绍:项目使用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修改引入
PS:使用et -i后,会增加一个.scss样式文件,对它进行修改。修改完后使用et,会出现一个theme的文件夹,将他引入到main.js中
步骤说明
-
进入项目文件夹
cd element-demo
-
安装主题生成工具
npm i element-theme -g
-
安装白垩主题(不可以省略)
npm i element-theme-chalk -D
-
改变初始变量文件
et -i
,会在根目录下多出一个element-variables.scss
文件 -
找到
imageelement-variables.scss
文件,修改主题色变量(primary
)和其他要改变的颜色(eg:danger
) -
编译主题
et
-
引入自定义主题,保存后,就可以看到颜色已变为了你设置的颜色
image
作者:hsqin
链接:https://www.jianshu.com/p/337c258151dc
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
网友评论