はじめに

electron-vue については、下記の記事や公式ドキュメントを参照してみてください。

electron-vue では electron-packager もしくは electron-builder を選択してアプリケーションをビルドします。デフォルトでは、 electron-builder が選択されています。

今回は、 electron-builder を使用した際の問題について記述します。

Element UI + 独自のスタイルで問題発生

Element UIはVueで使える、UIコンポーネントライブラリです。
Element UI 公式サイト（英語）

Element UI 導入

ElementUI を使いたいので、導入します。

$ yarn add element-ui
...
✨  Done in 8.42s.

公式ドキュメントに従って、src/renderer/main.js にElement UIを使うコードを追加します。

src/renderer/main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Elementのコンポーネントを使ったページの追加

ElementのButtonコンポーネントを使った簡単なサンプルコードを用意します。

Element.vue

<template lang="html">
  <div class="element">
     <el-button type="primary">何もスタイルあたってないボタン</el-button>
     <el-button class="element__originalButton">カスタムなボタン</el-button>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
.element__originalButton {
  background-color: #111;
  color: #fff;
}
</style>

yarn run dev で実行した結果は、下記のスクリーンショットのようになります。
真っ黒なボタンが１個追加されているのがわかります。

ビルドして実行してみる

コマンドが既に用意されているので、実行します。それなりに長いので気長に待ちます。

$ yarn run build
  ✔ building main process
  / building renderer process
✨  Done in 238.62s.

ビルドが完了したら、
build/mac/アプリ名.app を立ち上げてみます。

なんと、黒いボタンのスタイルが消えてしまい、Element UIデフォルトのボタン色がでてしまっています。

スタイルに差がでてしまう原因

スタイルに差がでてしまう原因は、 ビルドすると、style.cssを生成しますが main.js で読み込んでいるものは一番最後に style.css に挿入されてしまう事です。

つまり、 .vue ファイル内に書いたスタイルが、結局ElementUIのcssに上書きされてしまっているのです。

解決方法

記事冒頭で、 src/renderer/main.js に記述した ElementUIのスタイルを読み込みコードを src/renderer/App.vue に移動させます。

src/renderer/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'element-vue-style'
  }
</script>

<style>
+ @import "~element-ui/lib/theme-chalk/index.css";
</style>

再度、ビルドして実行してみるとしっかりとスタイルが当たっていることがわかります。

めでたしめでたし。