自定義element-ui主題

自定義element主題顏色：主要參考這個文章https://blog.csdn.net/wangcuiling_123/article/details/78513245，再自己做了一遍成功。感謝。

一、創建項目並安裝element

　　創建項目略，安裝element略，上官網查看怎樣安裝配置。

二、安裝主題工具

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 //表示成功

這時根目錄下會產生element-variables.scss（或自定義的文件），大致如下：

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

$--color-primary: purple;

五、編譯主題

修改完變量后，要編譯主題（如果編譯后，再次修改了變量，需要重新編譯）

et

> ✔ build theme font
> ✔ build element theme   //表示從新編譯成功

執行主題編譯命令生成主題，根目錄會生成一個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>

瀏覽器顯示可知成功。