vue中如何更改element-ui主題色

2022-08-10 14:00:03

vue更改element-ui主題色

第一步

開啟“elementUI官網“

點選“自定義主題“，

找到“線上主題生成工具“

第二步

點選“線上主題生成工具“，會進到一個新的頁面，點選“切換主題色“，點完之後，會出現一個彈出層，可以自己選擇顏色，也可以自己輸入自己的主題色，選擇好之後，點選“確定“，最後記得點選“切換“，你就會看見主題色已經已經切換了。

例如我設定的主題色是“#4FCC19“。

第三步

點選“下載主題“。

下載到你想要的位置，然後解壓，更改檔名“element“(我取名是這個，畢竟是elementUI嘛)。

第四步

將檔案引入到專案中，直接上圖吧，我引入位置如下。。。

在外層新建一個資料夾命名“theme“，再引入其中。

最後一步

那當然是引入到main.js中了哦。

import ElementUI from 'element-ui'
import './theme/element/index.css'

Vue.use(ElementUI);

使用element-ui自定義主題色

每個專案都有自己的主題色，接下來看看如何改變主題色。

效果圖

1、element-UI的theme-chalk是使用scss編寫的，所以要先安裝sacc

npm i sass-loader -D
//sass-loader依賴於node-sass
npm i node-sass -D

2、在專案的靜態資料夾下建立一個element-variables.scss檔案，寫入以下內容：

/* 改變主題色變數 */
$--color-primary: #f00;

/* 改變 icon 字型路徑變數，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

3、在專案入口檔案引入剛剛建立的檔案：

然後就可以實現效果了

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue中如何更改element-ui主題色

目錄

vue更改element-ui主題色

第一步

第二步

第三步

第四步

最後一步

使用element-ui自定義主題色

效果圖

熱門文章