自定義element-ui主題

自定義element主題顏色:主要參考這個(gè)文章https://blog.csdn.net/qq_35859392/article/details/87488389

一、創(chuàng)建項(xiàng)目并安裝element

創(chuàng)建項(xià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 //[可以自定義變量文件,默認(rèn)為element-variables.scss]

? Generator variables file //表示成功
這時(shí)根目錄下會產(chǎn)生element-variables.scss(或自定義的文件),大致如下:

image

直接編輯 element-variables.scss 文件,例如修改主題色為自己所需要的顏色

$--color-primary: purple;
五、編譯主題

修改完變量后,要編譯主題(如果編譯后,再次修改了變量,需要重新編譯)

et

? build theme font
? build element theme //表示從新編譯成功
執(zhí)行主題編譯命令生成主題,根目錄會生成一個(gè)theme的文件夾 。需要引入這個(gè)文件夾里的css、font等資源。

theme文件夾里有font文件夾和大量的css文件,css文件只留下index.css,其他的css文件都可以刪掉,因?yàn)閕ndex.css中的樣式包含其他全部css文件的樣式。

六、引入自定義主體。

先把安裝element時(shí)引入main.js中的主題樣式去掉,在main.js中引入

import '../theme/index.css'

七、驗(yàn)證自定義主題是否成功

在項(xiàng)目中寫些樣式,看下主題色是否改變

<el-row>
<el-button>默認(rèn)按鈕</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">危險(xiǎn)按鈕</el-button>
</el-row>
瀏覽器顯示可知成功。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 新建一個(gè)element-variables.scss,并在(main|app).js入口文件引入 在 elemen...
    kevin_lilei閱讀 4,941評論 1 2
  • element自定義主題官網(wǎng) 1. 項(xiàng)目中用了scss 直接在項(xiàng)目中改變 Element 的樣式變量。新建一個(gè)樣式...
    miliusa閱讀 6,074評論 0 0
  • element-ui 自定義主題工具 一、安裝elementUI及sass-loader,node-sass //...
    頁面仔小楊閱讀 6,828評論 0 0
  • 在項(xiàng)目開發(fā)過程中,為了提高開發(fā)效率,我們團(tuán)隊(duì)廣泛使用了element-ui的組件庫,但同時(shí)帶來一個(gè)問題就是組件的樣...
    follow_hui閱讀 61,739評論 5 14
  • 宋代:周敦頤 水陸草木之花,可愛者甚蕃。晉陶淵明獨(dú)愛菊。自李唐來,世人甚愛牡丹。予獨(dú)愛蓮之出淤泥而不染,濯清漣而不...
    江南莫之閱讀 471評論 4 7

友情鏈接更多精彩內(nèi)容