VSCode SCSS 설치 방법

오늘은 vscode에 SCSS를 설치하는 방법에 대해 알아보도록 합시다👻

가장 먼저 SASS를 설치 해줍니다(SASS 상관없이 SCSS도 적용이 됩니다.)

그 다음에는 live SASS 컴파일러를 다운해 줍니다.

두 플러그인을 설치를 한 뒤 vscode를 한번 껐다가 다시 키면 watch Sass가 생겼으면 완료입니다.

🔊SCSS를 사용할 때 꼭 이 버튼을 눌러 주세요~

 

다음으로는 셋팅을 바꿔 봅시다!

SCSS를 사용할때 자동으로 .css파일이 작성되고 저장되는 것이 좋을 것 같으니 srttings.json를 눌러서 변경해주기로 합니다.

 

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

extensionName
defult 값은 css이고 .min.css 등으로 설정할수 있습니다.

savePath
현재폴더(위치에) css 파일을 컴파일링 해 줍니다.
"~" : 현재 SCSS 파일의 위치로부터 상대 경로를 적어줄 때 사용합니다.
"/" : 루트 경로 입니다.

.map 파일을 생성 하지 않는 방법
"liveSassCompile.settings.generateMap"을 false로 변경해 주면 됩니다.

'ERROR_TIP' 카테고리의 다른 글

VS Code Prettier 설정하는 법  (2)	2022.09.05