sass를 컴파일하여 css로 사용하는 방법엔 여러가지가 있다.
이 글에서는 vscode에서 간편하게 scss를 컴파일 하는 방법을 다루겠다.
[필요 extension]
- sass
- sass Lint
- live sass compiler
- live server
설치를 완료했다면, 페이지 하단에 Live Sass Compiler와 닮은 아이콘이 생긴것을 볼 수 있다.
이제 자신의 scss파일을 Watch Sass 를 이용해서 컴파일을 할 수 있게 되었다.
테스트로, reset.scss를 가져와 컴파일을 해보았다.
Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 reset.css와 reset.css.map 파일이 생성된 것을 확인할 수 있다.
실제로 확인해 보면 reset.css를 이쁘게 잘 컴파일 되어있고, 필요가 없는 map파일이 생성되었다.
* 틈새지식 - .map파일이란? 개발자들이 디버깅을 하기 위해 확인하고 분석하는 파일이다. 한마디로 아직 우리에게는
필요가 없다..
공부를 하며 vscode에서 .map파일이 생성되지 않게 구글링을 많이 해 보았는데, 찾기가 너무 힘들었다.
Live Sass Compiler 에서 세팅을 바꿔주면 되는 것이였다.
자 이제 세팅을 바꿔주러 가보자.
file > Preferences > Setting 을 들어가서, Setting.json을 찾아준다.
그냥 setting.json을 검색해서 들어가도 되지만, 이해가 편하게 Live sass Compile을 쳐서 setting.json을 열어주었다.
비어있는 setting.json 파일이 열리게 되고, 다음과 같이 입력해 준다.
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap":
false,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
"editor.fontSize": 14,
"editor.renderWhitespace": "all",
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"editor.tabCompletion": "on"
}
이제 세팅을 저장해 주고, 다시한번 reset.scss를 저장해주면, "savePath" 의 위치에 컴파일된 css파일과 .map 파일이 생성된다.
** .map 파일 없애는 설정 - 위 코드를 살펴보면,
"liveSassCompile.settings.generateMap":
false,
이라고 되어있는 부분이 있다.
이 부분을 true로 하면 .map 파일이 생성되고, false로 하면 생성되지 않는다.