Live sass compiler 사용하기

저번 포스팅에서는 node에서 package.json으로 수작업(?)으로 자동 컴파일되는 환경을 세팅했었는데, (보러가기)

이번에는 vscode에서 제공되는 Live Sass Compiler라는 플러그인을 사용해 보도록 하겠습니다. 

설치하기

VSCode를 열고 확장프로그램 다운로드하는 곳에서 sass를 검색하면 나타납니다. 

Live Sass Compiler Plugin 

install을 클릭하여 설치합니다.  

그리고 우측 하단에 Watch Sass를 클릭하면 실시간으로 컴파일이 됩니다. 

이렇게 하면 자동으로 컴파일이 됩니다. 

자동 컴파일 실행

---

CSS경로 설정하기

vscode setting 란에서 scss에서 css로 컴파일 시 css가 저장될 경로를 지정해 줄 수 있습니다. 

왼쪽 하단 Manage 버튼에서 Setting을 들어갑니다. 

sass를 검색하고 방금 설치한 Live Sass Complier를 선택하면 여러 가지 세팅할 수 있는 화면이 나타납니다. 

그중Set your exported CSS styles, formats & save location. ( export 된 CSS 스타일들, 포맷, 저장 경로 설정 )

란의 Edit in settings.json을 클릭하면 설정 파일이 나타납니다.

 

{
    ...
    "liveSassCompile.settings.formats": [
        
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css" // 컴파일된 css 파일이 저장될 경로
        }
    ],
    ...
}

 

 

---

MappingURL

CSS로 변환된 파일을 보면 css파일 외에 map파일이 생성된 것을 볼 수 있습니다. 

또한 css파일 내에 map 주소가 주석 처리되어 하단에 나와있습니다. 

css.map과 sourceMappingURL

이것들의 용도는 바로 변환 이후에도 Chrome브라우저에서 디버깅 시 scss를 참조할 수 있게 각각의 정보를 mapping 해주는 용도입니다. 

 

만약 map 정보를 모두 지우고 개발자 모드에서 확인한다면, css파일을 체크합니다. 

mapping 정보 없음

mapping 정보가 존재한다면 css와 scss의 각 라인을 매핑시켜 scss를 체크합니다.

mapping 정보 있음

 

만약 프로젝트 전체가 SCSS기반이라면, mapping정보가 필요하겠지만, 

간혹 단독으로 쓰이고 납품하거나 배포 시에는 순수 CSS만 남겨야 한다면 mapping 정보가 필요 없을 수 있습니다. 

그런 경우 setting에서 mapping 정보가 생기지 않도록 설정할 수 있습니다. 

 

setting화면

Set it as 'false' if you don't want `.map`file for compolied CSS. 라고 적힌 부분에 Edit in setting.json을 클릭합니다. 

{
    ...
    "liveSassCompile.settings.generateMap": false, // true면 사용, false면 사용하지 않음 
    "liveSassCompile.settings.formats": [
        ...
    ],
    ...
}

기존에 있다면 true를 false로 변경해주면 됩니다. ( 만약 없는 경우 저 한 줄을 추가해 주면 됩니다.  )

이후 만들어진 scss에 대하여 더 이상 mapping 정보를 생성하지 않습니다.