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

vscode scss compiler VSCode에서 SCSS 컴파일 및 .map 파일 생성 방지 설정

부제: 간편하게 SCSS를 컴파일하고 .map 파일을 생성하지 않는 방법

---

안녕하세요, 여러분! 이번 포스팅에서는 Visual Studio Code(VSCode)에서 SCSS(Sassy CSS)를 간편하게 컴파일하고, 불필요한 .map 파일 생성을 방지하는 방법에 대해 알아보겠습니다. 코드 작성 환경을 더욱 효율적으로 만들어보세요.

필요한 확장(extension)

다음과 같은 확장 프로그램을 설치하면 SCSS 컴파일 및 .map 파일 관리가 훨씬 간편해집니다.

• Sass
• Sass Lint
• Live Sass Compiler
• Live Server

이제 준비가 되셨다면, 시작해봅시다!

SCSS 파일 컴파일하기

VSCode에서 SCSS 파일을 컴파일하려면, 아래와 같은 단계를 따르세요.

1. VSCode 하단에서 "Live Sass Compiler" 아이콘을 찾습니다.
2. 해당 아이콘을 클릭하여 활성화합니다.
3. 이제 사용하고자 하는 SCSS 파일을 선택한 후, "Watch Sass"를 선택합니다.
4. 컴파일 된 CSS 파일과 .map 파일이 동일한 경로에 생성됩니다.

.map 파일 생성 방지하기

불필요한 .map 파일을 생성하지 않으려면 다음과 같이 설정하세요.

1. File > Preferences > Settings로 들어갑니다.
2. settings.json 파일을 찾습니다. 만약 파일을 찾기 어렵다면, 검색 기능을 활용해도 좋습니다.
3. 아래 코드를 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"
}

4. 설정을 저장한 후, SCSS 파일을 다시 저장하면 컴파일된 CSS 파일과 .map 파일이 생성됩니다. .map 파일 생성을 방지하려면 generateMap을 false로 설정하십시오.

마무리

이제 여러분은 VSCode에서 SCSS 파일을 간편하게 컴파일하고, 불필요한 .map 파일 생성을 방지하는 방법을 알게 되었습니다. 이러한 설정을 통해 개발 환경을 더욱 효율적으로 관리할 수 있을 것입니다. 문제 해결 과정과 팁을 공유해드린 이 글이 여러분의 개발 루틴에 도움이 되기를 바랍니다.

주의사항

• 본 글은 독자들에게 도움을 제공하기 위해 작성되었으며, 본인의 경험과 연구 결과를 기반으로 합니다.
• 사용한 확장 프로그램 및 설정은 작성 시점의 것으로, 추후 업데이트에 따라 변경될 수 있습니다.

---

이로써 SCSS 컴파일과 .map 파일 생성 방지 설정에 대한 내용을 소개드렸습니다. 여러분의 개발 작업을 보다 효율적으로 수행할 수 있기를 바랍니다. 추가적인 궁금한 사항이나 질문이 있다면 언제든지 문의해주세요. 감사합니다!