electron-vueで、ビルドするとスタイルに差がでる問題の解決
はじめに
electron-vue
については、下記の記事や公式ドキュメントを参照してみてください。
- 2017年度版 electron-vueで始めるVue.js]
- 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を使うコードを追加します。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Elementのコンポーネントを使ったページの追加
ElementのButtonコンポーネントを使った簡単なサンプルコードを用意します。
<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
で実行した結果は、下記のスクリーンショットのようになります。
真っ黒なボタンが1個追加されているのがわかります。
ビルドして実行してみる
コマンドが既に用意されているので、実行します。それなりに長いので気長に待ちます。
$ 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
に移動させます。
<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>
再度、ビルドして実行してみるとしっかりとスタイルが当たっていることがわかります。
めでたしめでたし。
Author And Source
この問題について(electron-vueで、ビルドするとスタイルに差がでる問題の解決), 我々は、より多くの情報をここで見つけました https://qiita.com/SatoTakumi/items/0c2b62dcf0d3e688290c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .