更換主題顏色 vue&&elementUI
elementUi默認的主題顏色是鮮艷获黔、友好的藍色蚀苛，當(dāng)我們做的項目主題不符合藍色調(diào)時，我們可以改變整個ui組件的顏色玷氏。來進行優(yōu)化堵未。使用scss變量改變主題是最簡單的一種方式
- 1.安裝scss包
npm install --save-dev sass-loader
npm install --save-dev node-sass
使用npm 安裝以上兩個包 安裝完畢后可以檢查package.json檢查依賴
image.png
這樣就安裝成功了
- 2.新建樣式文件 例如 element-variables.scss 寫入以下內(nèi)容
/* 改變主題色變量 */
$--color-primary: #f56c6c;
/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
image.png
查看elementui官網(wǎng)主題顏色 https://element.eleme.cn/#/zh-CN/component/custom-theme有這么多 可以直接寫在 color-primary配置項中
- 3.之后盏触，在項目的入口文件中渗蟹，直接引入以上樣式文件即可（無需引入 Element 編譯好的 CSS 文件）：
import Vue from 'vue'
import Element from 'element-ui'
import '../public/stylesheets/element-variables.scss'
Vue.use(Element)
！赞辩！注意觀察導(dǎo)入.scss文件的路徑 如果放在public中 應(yīng)該相應(yīng)的修改路徑
image.png
以下給出路徑作參考雌芽。
-
4.最后 刷新一下瀏覽器 主題顏色就會改變了
image.png
