vue中自定義element-ui組件庫的主題顏色

前言：在項目中直接修改element的樣式變量，前提是需要使用scss編寫，這就需要首先在項目中安裝可以解析scss文件格式的插件

1、第一步：安裝解析scss文件格式的插件sass-loader,node-sass

npm install sass-loader node-sass -dev

2、第二步：在src下新建theme文件，並在文件下新建element-variables.scss文件，element-variables.scss文件配置代碼如下

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

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

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

3、在main.js中引入配置好的自定義主題文件

import './theme/element-variables.scss'

4、正常使用組件就可以了，如下type=“”primary“的按鈕顏色便成了上面設置好的顏色，同樣如果也需要修改success等類型的顏色，按照上面的方式修改即可

 <el-button type="primary">主要按鈕</el-button>