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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容