소개

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를 사용하는 코드를 추가합니다.

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 에서 수행한 결과는 아래 스크린샷과 같습니다.
새까만 버튼이 1개 추가되어 있는 것을 알 수 있습니다.

빌드하고 실행해보기

명령이 이미 준비되어 있으므로 실행합니다. 나름대로 길기 때문에 기장에 기다립니다.

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

빌드가 완료되면,build/mac/アプリ名.app 를 시작해 봅니다.

무려, 검은 버튼의 스타일이 사라져 버려, Element UI 디폴트의 버튼색이 나와 버리고 있습니다.

스타일에 차이가 생기는 원인

스타일에 차이가 생기는 원인은 빌드하면 style.css를 생성합니다.

즉, main.js 파일내에 쓴 스타일이, 결국 ElementUI의 css에 덧쓰기되어 버리고 있는 것입니다.

해결 방법

기사 시작 부분에서 .vue 에 설명된 ElementUI 스타일을 로드 코드를 src/renderer/main.js 로 이동합니다.

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>

다시, 빌드하고 실행해 보면 제대로 스타일이 맞고 있는 것을 알 수 있습니다.



죄송합니다.