[Vue] vue-cli-serve production 빌드 시 스타일 문제 해결과정

문제를 접하다

기존 dev 환경에서 빌드하고 배포할땐 전혀 문제가 되지 않았는데 이상하게 production 빌드 시 특정 스타일이 무너지기 시작했다. 여러가지 시도를 거쳤지만 뭐가 문젠지 찾지 못하고 요소 하나하나 뒤져보다 발견한게 해당 css 파일 중 reset.css 로 저장된 파일이 컴포넌트 스타일 적용을 막고있는 문제였다. ㅠㅠ (대체 왜..)
여러번의 빌드로 테스트를 해보니 production으로 빌드되면서 min 파일 변환되면서 스타일이 적용되는 순서에서 문제가 있다는것을 발견했다.

 

프로젝트 기획부터 문제

사실 중소에 다니는 여러 개발자들이 겪는 가장 큰 문제라고 생각하는게, 바로 프로젝트 기획이다. 

 아무래도 개발자는 적고 앱,웹 사업을 하고싶어하는 회사는 많으니 적은 인원으로 여러가지 사업에 도전하기위해 제대로 기획이 갖춰지지 않은채로 프로젝트가 진행되곤 한다. 특히나 페르소나라는 기획 기초설계를 지금 회사에서 보지도 못햇다는 충격적인 사실... 요즘은 제대로 된 기획자는 매우 찾기가 힘들고 특히나 개발을 하다 기획으로 넘어온 케이스는 부르는게 값일 정도로 엄청난 메리트를 가지고 있다고 전해들었다. 그래서인지 현 회사에서는 기획력을 갖추고 UI/UX의 기본기마저 갖춘 개발자를 필요로 한다.

 사실 이 프로젝트도 제대로 기획이 갖춰지지 않은채 회원서비스로 진행될거였으므로 추후에 같은 프로젝트에 서비스화면까지 우겨넣을거라곤 생각도 안하고 있었다... 디스크립션 없는 그림을 몇번이고 보며 상상의나래를 펼쳐 디자인까지 입혀서 만들어놨더니 서비스 화면을 우겨넣자고 하니.. component 안에 스타일을 @import 로 우겨넣었다.

 

원인

production 빌드시 css 가 min 으로 변환되는 순서에 존재했다.

보통 serve로 돌릴 경우 app.vue를 기반으로 임포트 되는데, min 변환이 일어나면서 css 순서에 변화가 생기고 우선순위가 달라졌던것이였다.

vue 스타일 가이드에서는 components 별로 스타일은 scoped 지정해 사용하라고 하기때문에 꼭 숙지하고 사용해야겟다

 

 

스타일 가이드 | Vue.js