PS C:\workspace\mfront-mobile-app> et
PS C:\workspace\mfront-mobile-app>
- build element theme

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: node_modules\element-theme-chalk\src\radio.scss
Error: Undefined variable: "$--radio-checked-text-color".
        on line 138 of node_modules/element-theme-chalk/src/radio.scss, in mixin `@content`
        from line 168 of node_modules/element-theme-chalk/src/mixins/mixins.scss, in mixin `when`
        from line 127 of node_modules/element-theme-chalk/src/radio.scss, in mixin `@content`
        from line 97 of node_modules/element-theme-chalk/src/mixins/mixins.scss, in mixin `e`
        from line 87 of node_modules/element-theme-chalk/src/radio.scss, in mixin `@content`
        from line 74 of node_modules/element-theme-chalk/src/mixins/mixins.scss, in mixin `b`
        from line 6 of node_modules/element-theme-chalk/src/radio.scss
        from line 14 of node_modules/element-theme-chalk/src/index.scss
>>         color: $--radio-checked-text-color;

   ---------------^

    at Object.module.exports.renderSync (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\node-sass\lib\index.js:439:16)
    at DestroyableTransform._transform (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\gulp-sass\index.js:157:36)
    at DestroyableTransform.Transform._read (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:83)
    at doWrite (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:428:64)
    at writeOrBuffer (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:334:11)
    at write (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:623:24)
    at flow (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (C:\Program Files\nodejs\node_global\node_modules\element-theme\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:664:5)

碰到了奇葩事情，記錄一下审胚。竟然是同事在修改 element-variables.scss 代碼不小心刪除一行代碼，說(shuō)這句編譯錯(cuò)誤礼旅。

elementui.png

我的解決方案：
第一次.
刪除node-modules膳叨，重新編譯主題。結(jié)果還是報(bào)這個(gè)錯(cuò)誤
第二次
刪除 element-variables.scss 和 編譯后的 theme 文件夾痘系，重新安裝了一遍菲嘴，對(duì)比了前后element-variable.scss發(fā)現(xiàn)代碼不完整。

怎么更換element主題

Element 默認(rèn)提供一套主題汰翠，CSS 命名采用 BEM 的風(fēng)格龄坪，方便使用者覆蓋樣式。為了滿足我們面對(duì)各種各樣千奇百怪的需求复唤，官方提供了三種方法健田，可以進(jìn)行不同程度的樣式自定義。

僅替換主題色

在線主題生成工具

在項(xiàng)目中改變 SCSS 變量

新建一個(gè)樣式文件佛纫，例如 element-variables.scss妓局，寫(xiě)入以下內(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ì)路徑即可存炮。

命令行主題工具

安裝工具

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

npm i element-theme -g

安裝白堊主題充尉，可以從 npm 安裝或者從 GitHub 拉取最新代碼飘言。

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

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

?初始化變量文件

主題生成工具安裝成功后，如果全局安裝可以在命令行里通過(guò) et 調(diào)用工具驼侠，如果安裝在當(dāng)前目錄下姿鸿，需要通過(guò) node_modules/.bin/et 訪問(wèn)到命令。執(zhí)行 -i 初始化變量文件倒源。默認(rèn)輸出到 element-variables.scss苛预，當(dāng)然你可以傳參數(shù)指定文件輸出目錄。

et -i [可以自定義變量文件]

> ? Generator variables file

如果使用默認(rèn)配置笋熬，執(zhí)行后當(dāng)前目錄會(huì)有一個(gè) element-variables.scss 文件热某。內(nèi)部包含了主題所用到的所有變量，它們使用 SCSS 的格式定義胳螟。大致結(jié)構(gòu)如下：

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

...

?修改變量

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

$--color-primary: red;

?編譯主題

保存文件后糖耸，到命令行里執(zhí)行 et 編譯主題秘遏，如果你想啟用 watch 模式，實(shí)時(shí)編譯主題嘉竟，增加 -w 參數(shù)邦危；如果你在初始化時(shí)指定了自定義變量文件，則需要增加 -c 參數(shù)舍扰，并帶上你的變量文件名

et

> ? build theme font
> ? build element theme

?引入自定義主題

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

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

?搭配插件按需引入組件主題

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

{
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "~theme"
    }
  ]]]
}