Dragonball Online Goku Hand
본문 바로가기
Error 명예 해결사

[Error 명예 해결사] vs code SCSS 설정편

by 별의 코비 2022. 9. 19.
728x90

📍 SCSS를 VScode에서 사용하는 방법

SCSS를 VScode에서 사용하는 방법에 대해 알아봅시다!

➰ 설치

1. VScode에 Live Sass Compiler를 설치해줍니다.

Sass

2. 설치하셨다면 Sass 또한 설치해줍니다.

sass

3. Sass도 설치완료하였다면 밑에를 확인해야합니다. 창 하단에 Watch Sass가 뜬다면 설치완료한 것입니다.

sass

📍 SCSS를 CSS로 컴파일하는 방법

settings에 들어간 후 json을 검색하여 Edit in settings.json을 클릭후 밑에와 같이 넣어주면 됩니다.
map 파일을 생성하지 않으면 아래와 같이 써주면 됩니다.
-> "liveSassCompile.settings.generateMap": false
주석표시한 부분은 주석을 해주어야 .css파일이 작업 내용을 저장할 때마다 생기는 것을 방지할 수 있습니다.

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
  // {
  //   "format": "expanded",
  //   "extensionName": ".css",
  //   "savePath": "~/../css/"
  // },
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../css/"
  }
]

댓글