vscode scss compiler sass 사용하는법 .map파일이 생성되지 않게 설정

vscode에서 SCSS 컴파일하여 .map 파일 생성하지 않는 방법

소개

SCSS를 CSS로 변환하여 사용하는 방법은 다양합니다. 이번 포스팅에서는 Visual Studio Code에서 간편하게 SCSS를 컴파일하는 방법을 알아보겠습니다. 필요한 확장 프로그램을 설치하고 설정하는 방법을 자세히 설명하겠습니다.

필요한 확장 프로그램

Sass : SCSS를 컴파일하기 위한 확장 프로그램입니다.
Sass Lint : SCSS 코드의 스타일 및 오류를 검사하는 확장 프로그램입니다.
Live Sass Compiler : 실시간으로 SCSS를 CSS로 컴파일해주는 확장 프로그램입니다.
Live Server : 정적 웹 페이지를 로컬 서버에서 실행해주는 확장 프로그램입니다.

확장 프로그램 설치

위의 확장 프로그램들을 설치하고 활성화한 후, Visual Studio Code 하단에 Live Sass Compiler와 유사한 아이콘이 생긴 것을 확인할 수 있습니다.

SCSS 컴파일하기

이제 자신의 SCSS 파일을 Live Sass Compiler를 이용하여 컴파일할 수 있습니다. 테스트로 reset.scss 파일을 가져와 컴파일해보겠습니다.

컴파일이 시작되면 "Watching..." 메시지와 함께 같은 경로에 reset.css와 reset.css.map 파일이 생성되는 것을 확인할 수 있습니다.

.map 파일 생성 방지

.map 파일은 개발자가 디버깅 및 분석을 위해 사용하는 파일입니다. 대부분의 경우 이 파일은 필요하지 않을 수 있습니다. .map 파일이 생성되지 않도록 설정하는 방법을 알아보겠습니다.

Visual Studio Code의 메뉴에서 File > Preferences > Settings로 들어갑니다.
검색 창에 "Live Sass Compile"을 입력하여 설정을 찾습니다.
설정 파일인 settings.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 파일이 생성되지 않습니다. 이렇게 설정을 변경하여 프로젝트를 더욱 깔끔하게 관리할 수 있습니다.

참고: 이 글은 Visual Studio Code 및 SCSS 컴파일링에 관한 내용을 다루고 있으며, 개발자들의 편의성을 높이기 위한 설정 방법을 설명하고 있습니다.

html5css2018

이 블로그 검색