自定義element主題顏色:主要參考這個文章https://blog.csdn.net/qq_35859392/article/details/87488389
。
一、創(chuàng)建項目并安裝element
創(chuàng)建項目略呀酸,安裝element略,上官網(wǎng)查看怎樣安裝配置。
二、安裝主題工具
npm i element-theme -g
三碰辅、安裝chalk主題,可以從 npm 安裝或者從 GitHub 拉取最新代碼
從 npm
npm i element-theme-chalk -D
從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
四介时、獲取theme的sass文件并修改
et -i //[可以自定義變量文件没宾,默認為element-variables.scss]
? Generator variables file //表示成功
這時根目錄下會產(chǎn)生element-variables.scss(或自定義的文件),大致如下:
直接編輯 element-variables.scss 文件沸柔,例如修改主題色為自己所需要的顏色
$--color-primary: purple;
五榕吼、編譯主題
修改完變量后,要編譯主題(如果編譯后勉失,再次修改了變量,需要重新編譯)
et
? build theme font
? build element theme //表示從新編譯成功
執(zhí)行主題編譯命令生成主題原探,根目錄會生成一個theme的文件夾 乱凿。需要引入這個文件夾里的css、font等資源咽弦。
theme文件夾里有font文件夾和大量的css文件徒蟆,css文件只留下index.css,其他的css文件都可以刪掉,因為index.css中的樣式包含其他全部css文件的樣式型型。
六段审、引入自定義主體。
先把安裝element時引入main.js中的主題樣式去掉闹蒜,在main.js中引入
import '../theme/index.css'
七寺枉、驗證自定義主題是否成功
在項目中寫些樣式抑淫,看下主題色是否改變
<el-row>
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險按鈕</el-button>
</el-row>
瀏覽器顯示可知成功。