vue使用改變element-ui主題色

每一個項目的主題色通常都不同，直接用element-ui的默認主題色彷佛有點不合適，還須要本身一個一個的找元素class名而後在修改樣式，很是麻煩，還容易影響到包含該類名的其餘元素樣式，因此須要自定義主題色。

在項目中改變 SCSS 變量

Element 的 theme-chalk 使用 SCSS 編寫，因此我先在項目裏安裝sass

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

我在項目根目錄下面  /static/css文件夾下新建一個scss樣式文件，例如 element-variables.scss，寫入如下內容：

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

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

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

以後，在項目的入口文件中，直接引入以上樣式文件便可（無需引入 Element 編譯好的 CSS 文件）：

import Vue from 'vue'
import Element from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css';//這裏無需引入element-ui的css
import '../static/css/element-variables.scss'

Vue.use(Element)

主題色就變成了紅色，不妨試試吧