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

然后引入自定義主題

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM