element自定義主題色，編譯報錯解決

根據官方文檔

新建一個樣式文件，例如 element-variables.scss，寫入以下內容：

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

/* 改變 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-variables.scss'

Vue.use(Element)

 

在編譯時出現大量類似下面的錯誤

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($px, $screenWidth)

查了后發現是當sass版本>= 1.33.0時，會不支持這種語法，通過npm i sass@1.30.0可以解決。