|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: "Vue.js 외부 CSS 라이브러리 추가하기" |
| 4 | +date: 2017-01-17 15:35:31 +0900 |
| 5 | +categories: jekyll update |
| 6 | +author: "Lee Sun-Hyoup" |
| 7 | +excerpt: "Vue.js에서 SCSS, LESS, PostCSS와 같은 외부 라이브러리를 추가하는 방법에 대해서 알아봅시다." |
| 8 | +--- |
| 9 | + |
| 10 | +Vue.js는 `vue-loader`를 통해서 다른 Webpack 로더를 불러와서 Vue 컴포넌트를 처리 할 수 있습니다. 그 방법을 통해서 유용하게 쓰이는 것 중 하나가 CSS를 처리하는 방법인데요, 이번 포스팅에서는 **SCSS, LESS, Stylus**와 같은 전처리기와 **PostCSS**와 같은 후처리기를 Vue.js에서 불러오는 방법에 대해서 알아보겠습니다. |
| 11 | + |
| 12 | +## 전처리기(Pre-Processer) |
| 13 | +CSS에서 **전처리기**란 이름 그대로 CSS를 **먼저 처리하는** 도구입니다. CSS보다 더 간단하고 구조적으로 작성할 수 있는 문법을 제공하고 그 문법에 맞춰서 스타일을 작성하면 자동으로 CSS 파일을 만들어줍니다. 이러한 전처리기에는 **SCSS, LESS, Stylus** 등이 있습니다. 간단한 예제 코드를 통해 차이점을 알아봅시다. 이 예제는 SCSS를 통해 작성되었습니다. |
| 14 | + |
| 15 | +### CSS |
| 16 | +```css |
| 17 | +body { |
| 18 | + font-size: 12pt; |
| 19 | + color: #012345; |
| 20 | +} |
| 21 | + |
| 22 | +body a { |
| 23 | + color: #555555; |
| 24 | +} |
| 25 | +``` |
| 26 | + |
| 27 | +### LESS |
| 28 | +```scss |
| 29 | +$body-color: #012345; |
| 30 | +$anchor-color: #555555; |
| 31 | +body { |
| 32 | + font-size: 12pt; |
| 33 | + color: $body-color; |
| 34 | + |
| 35 | + a { |
| 36 | + color: $anchor-color; |
| 37 | + } |
| 38 | +} |
| 39 | +``` |
| 40 | + |
| 41 | +보시다시피 전처리기는 **변수**와 **중첩** 문법을 사용할 수 있습니다. |
| 42 | + |
| 43 | +## 후처리기(Post-Processor) |
| 44 | +**후처리기**는 마찬가지로 이름 처럼 CSS를 작성한 **후에 처리하는** 도구입니다. 주로 후처리기는 `PostCSS`라는 것을 사용합니다. `PostCSS`의 주요한 플러그인 중 하나인 Autoprefixer에 대해서 소개해드리겠습니다. 흔히 CSS를 작성할 때에는 크로스 브라우징을 염두해두고 작성합니다. |
| 45 | + |
| 46 | +```css |
| 47 | +.flexbox { |
| 48 | + display: -webkit-box; |
| 49 | + display: -webkit-flex; |
| 50 | + display: -ms-flexbox; |
| 51 | + display: flex; |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +이러한 작업은 SASS, LESS와 같은 전처리기가 등장하면서 조금 더 편해졌습니다. |
| 56 | + |
| 57 | +```scss |
| 58 | +@mixin flexbox() { |
| 59 | + display: -webkit-box; |
| 60 | + display: -webkit-flex; |
| 61 | + display: -ms-flexbox; |
| 62 | + display: flex; |
| 63 | +} |
| 64 | + |
| 65 | +.flexbox { |
| 66 | + @include flexbox; |
| 67 | +} |
| 68 | +``` |
| 69 | + |
| 70 | +위 처럼 미리 Mixin을 만들어 둔 후 include하는 방식을 통해 중복된 작업을 줄일 수 있었습니다. 이렇게 작성하면 기존 CSS를 작성하는 것보다 간단하지만 두 가지 신경써야할 점이 있습니다. 첫 번째는 브라우저의 지원 상황을 개발자가 알고 있어야합나다. 두 번째는 개발자의 실수로 빼먹을 수 있다는 점입니다. 만약 후처리기를 사용한다면 이런 문제를 쉽게 해결 할 수 있습니다. |
| 71 | + |
| 72 | +```css |
| 73 | +/* input.css */ |
| 74 | +.flexbox { |
| 75 | + display: flex; |
| 76 | +} |
| 77 | + |
| 78 | +/* output.css */ |
| 79 | +.flexbox { |
| 80 | + display: -webkit-box; |
| 81 | + display: -webkit-flex; |
| 82 | + display: -ms-flexbox; |
| 83 | + display: flex; |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +보시다시피 후처리기를 사용하면 별다른 작업없이 알아서 vender prefix를 더해줍니다. |
| 88 | + |
| 89 | +## `vue-loader`를 통해 가져오기 |
| 90 | +만약 CSS 전처리기와 후처리기를 사용한다면 개발자의 생산성을 대폭 증가시킬 수 있을겁니다. 이제 우리는 Vue 컴포넌트에도 이 도구들을 적용시키고 싶습니다. 어떻게 해야할까요? 생각보다 매우 간단합니다. 여기서는 `vue-cli`를 통해 시작하겠습니다. |
| 91 | + |
| 92 | +### 전처리기 추가하기 |
| 93 | +먼저 전처리기를 추가해봅시다. Vue에서 전처리기를 사용하는 방법은 매우 간단합니다. `*.vue` 파일의 스타일 블럭에 `lang='scss'` 속성을 추가헤주세요. 그 후에 노드 서버를 실행시켜봅시다. |
| 94 | + |
| 95 | +``` |
| 96 | +ERROR in ./src/App.vue |
| 97 | +Module not found: Error: Cannot resolve module 'sass-loader' in /path/src |
| 98 | + @ ./src/App.vue 5:0-170 |
| 99 | +``` |
| 100 | + |
| 101 | +그렇다면 위와 같은 에러를 볼 수 있습니다. 전처리기를 사용하기 위해서는 적절한 Webpack 로더를 설치해야합니다. 여기서는 SCSS를 사용하기 위해 `sass-loader`와 `node-sass`를 설치하겠습니다. |
| 102 | + |
| 103 | +```bash |
| 104 | +$ npm install sass-loader node-sass --save-dev |
| 105 | +``` |
| 106 | + |
| 107 | +설치가 완료된 후 새로고침을 통해 확인해보면 (혹은 핫 리로딩에 의해) 적용이 완료된 화면을 볼 수 있습니다! |
| 108 | + |
| 109 | +### 후처리기 추가하기 |
| 110 | +후처리기를 추가하는 방법은 전처리기를 추가하는 방법보다 아주 조금 더 복잡합니다. 왜냐하면 Webpack 설정을 수정해야하기 때문입니다. 먼저 Webpack 설정을 확인해봅시다. 만약 `vue-cli`로 `webpack` 템플릿을 불러왔을 경우 build 디렉토리에 `webpack.base.conf.js` 파일을 확인해봅시다. |
| 111 | + |
| 112 | +```js |
| 113 | +vue: { |
| 114 | + loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), |
| 115 | + postcss: [ // 이 리스트에 추가하면 됩니다. |
| 116 | + require('autoprefixer')({ |
| 117 | + browsers: ['last 2 versions'] |
| 118 | + }) |
| 119 | + ] |
| 120 | +} |
| 121 | +``` |
| 122 | + |
| 123 | +사실 `vue-cli`를 이용해서 `webpack` 템플릿을 불러오면 이미 `autoprefixer` 플러그인이 붙어있습니다. 다음 [링크](https://vue-loader.vuejs.org/kr/features/postcss.html)를 확인하시면 PostCSS 플러그인을 불러오는 방법에 대해서 더 자세히 알 수 있습니다. |
| 124 | + |
| 125 | +## 마지막으로... |
| 126 | +`vue-loader`를 이용하면 Vue를 위한 모듈 중 CSS 뿐만 아닌 더 다양한 모듈을 불러올 수 있습니다! 예를 들어 `CoffeeScript`나 `TypeScript`를 사용한다던가 `Linting` 등을 할 수도 있습니다. 혹은 `e2e Test`, `Unit Test`도 가능합니다. 더 좋은 개발 환경을 위하여 `vue-loader`에 대해서 알고 싶다면 Reference 항목의 링크를 참고해주세요! |
| 127 | + |
| 128 | +## Reference |
| 129 | +* [vue-loader 문서](https://vue-loader.vuejs.org) |
0 commit comments