美文网首页
vue+ElementUI改变主题色

vue+ElementUI改变主题色

作者: 秀萝卜 | 来源:发表于2020-06-30 09:05 被阅读0次

    背景介绍:项目使用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中
    

    步骤说明

    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)

      image
    6. 编译主题et

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

      image

    作者:hsqin
    链接:https://www.jianshu.com/p/337c258151dc
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

          本文标题:vue+ElementUI改变主题色

          本文链接:https://www.haomeiwen.com/subject/nvjtqktx.html