官網(wǎng)地址：https://element.eleme.cn/

elementUI 提供了三種方法，可以進(jìn)行不同程度的樣式自定義。

方式一：僅替換主題色

Element 默認(rèn)的主題色是鮮艷、友好的藍(lán)色。如果僅希望更換 Element 的主題色，推薦使用在線主題生成工具。通過(guò)替換主題色，能夠讓 Element 的視覺更加符合具體項(xiàng)目的定位。

使用上述工具，可以很方便地實(shí)時(shí)預(yù)覽主題色改變之后的視覺，同時(shí)它還可以基于新的主題色生成完整的樣式文件包，供直接下載使用。

可「引入自定義主題」或「搭配插件按需引入組件主題」

---

方式二： 在項(xiàng)目中改變 SCSS 變量

Element 的 theme-chalk 使用 SCSS 編寫，如果你的項(xiàng)目也使用了 SCSS，那么可以直接在項(xiàng)目中改變 Element 的樣式變量。

新建一個(gè)樣式文件，例如 element-variables.scss，寫入以下內(nèi)容：

/* 改變主題色變量 */
$--color-primary: teal;

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

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

之后，在項(xiàng)目的入口文件中，直接引入以上樣式文件即可（無(wú)需引入 Element 編譯好的 CSS 文件）：

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

⚠️ 需要注意的是，覆蓋字體路徑變量是必需的，將其賦值為 Element 中 icon 圖標(biāo)所在的相對(duì)路徑即可。

---

方法三：命令行主題工具

如果你的項(xiàng)目沒有使用 SCSS，那么可以使用命令行主題工具進(jìn)行深層次的主題定制：

1、首先安裝「主題生成工具」，可以全局安裝或者安裝在當(dāng)前項(xiàng)目下，推薦安裝在項(xiàng)目里，方便別人 clone 項(xiàng)目時(shí)能直接安裝依賴并啟動(dòng)，這里以全局安裝做演示。

npm i element-theme -g

2、安裝白堊主題，可以從 npm 安裝或者從 GitHub 拉取最新代碼。

# 從 npm
npm i element-theme-chalk -D

# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

3、初始化變量文件

主題生成工具安裝成功后，如果全局安裝可以在命令行里通過(guò) et 調(diào)用工具

如果安裝在當(dāng)前目錄下，需要通過(guò) node_modules/.bin/et 訪問到命令。

執(zhí)行 -i 初始化變量文件。默認(rèn)輸出到 element-variables.scss，當(dāng)然你可以傳參數(shù)指定文件輸出目錄。

4、修改變量

直接編輯 element-variables.scss 文件，例如修改主題色為紅色。

$--color-primary: red;

5、編譯主題

保存文件后，到命令行里執(zhí)行 et 編譯主題，如果你想啟用 watch 模式，實(shí)時(shí)編譯主題，增加 -w 參數(shù)；

如果你在初始化時(shí)指定了自定義變量文件，則需要增加 -c 參數(shù)，并帶上你的變量文件名

6、引入自定義主題

默認(rèn)情況下編譯的主題目錄是放在 ./theme 下，你可以通過(guò) -o 參數(shù)指定打包目錄。像引入默認(rèn)主題一樣，在代碼里直接引用 theme/index.css 文件即可。

7、搭配插件按需引入組件主題

如果是搭配 babel-plugin-component 一起使用，只需要修改 .babelrc 的配置，指定 styleLibraryName 路徑為自定義主題相對(duì)于 .babelrc 的路徑，注意要加 ~。

總結(jié)

以上是生活随笔為你收集整理的elementUI-自定义主题几种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。