[vscode] vscode에서 scss 사용하기

sass를 컴파일하여 css로 사용하는 방법엔 여러가지가 있다.

이 글에서는 vscode에서 간편하게 scss를 컴파일 하는 방법을 다루겠다.

 

[필요 extension]

- sass

- sass Lint

- live sass compiler

- live server

extension - scss와 scss Lint를 설치하는 이미지

Live server와 Live Sass Compiler를 설치하는 이미지

설치를 완료했다면, 페이지 하단에 Live Sass Compiler와 닮은 아이콘이 생긴것을 볼 수 있다.

 

Watch Sass 확인 이미지

이제 자신의 scss파일을 Watch Sass 를 이용해서 컴파일을 할 수 있게 되었다.

테스트로, reset.scss를 가져와 컴파일을 해보았다.

 

빨간 박스를 주목해 주세요.

Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 reset.css와 reset.css.map 파일이 생성된 것을 확인할 수 있다.

실제로 확인해 보면 reset.css를 이쁘게 잘 컴파일 되어있고, 필요가 없는 map파일이 생성되었다.

 

* 틈새지식 - .map파일이란? 개발자들이 디버깅을 하기 위해 확인하고 분석하는 파일이다. 한마디로 아직 우리에게는

필요가 없다..

 

공부를 하며 vscode에서 .map파일이 생성되지 않게 구글링을 많이 해 보았는데, 찾기가 너무 힘들었다.

 

Live Sass Compiler 에서 세팅을 바꿔주면 되는 것이였다.

자 이제 세팅을 바꿔주러 가보자.

 

file > Preferences > Settings

file > Preferences > Setting 을 들어가서, Setting.json을 찾아준다.

 

settings.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로 하면 생성되지 않는다.