自定義element-ui主題

自定義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(或自定義的文件),大致如下:

image

直接編輯 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>
瀏覽器顯示可知成功。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末姥闪,一起剝皮案震驚了整個濱河市始苇,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌筐喳,老刑警劉巖催式,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異避归,居然都是意外死亡荣月,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門梳毙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哺窄,“玉大人,你說我怎么就攤上這事顿天√寐龋” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵牌废,是天一觀的道長咽白。 經(jīng)常有香客問我,道長鸟缕,這世上最難降的妖魔是什么晶框? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮懂从,結(jié)果婚禮上授段,老公的妹妹穿的比我還像新娘。我一直安慰自己番甩,他們只是感情好侵贵,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缘薛,像睡著了一般窍育。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宴胧,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天漱抓,我揣著相機與錄音,去河邊找鬼恕齐。 笑死乞娄,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仪或,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼确镊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了溶其?” 一聲冷哼從身側(cè)響起骚腥,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瓶逃,沒想到半個月后束铭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡厢绝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年契沫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昔汉。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖靶病,靈堂內(nèi)的尸體忽然破棺而出会通,到底是詐尸還是另有隱情,我是刑警寧澤涕侈,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布,位于F島的核電站端三,受9級特大地震影響鹃彻,放射性物質(zhì)發(fā)生泄漏虚婿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一至朗、第九天 我趴在偏房一處隱蔽的房頂上張望屉符。 院中可真熱鬧,春花似錦、人聲如沸矗钟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吨艇。三九已至躬它,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間东涡,已是汗流浹背冯吓。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疮跑,地道東北人组贺。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像祖娘,于是被迫代替她去往敵國和親失尖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容