728x90
VScode 확장 프로그램 이용해 SASS compile 하기
VScode에서 SASS를 설치하고 compile 하는 방법을 알아보겠습니다.
1. SASS Compile 설치
Extensions(ctrl + shift + X)에 들어가서 sass와 Live Sass Compiler를 검색 후 설치 해줍니다. 화면 하단에 Watch SASS가 추가됐는지 확인합니다.
2. SASS Compile 설정
F1 버튼을 눌러 Preference Open User Setting(JSON)을 검색 후 클릭합니다.
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/"
}
01. format
expanded, compact, compressed, nested가 있고 default 값은 expanded입니다.
02. extensionName
default 값은 .css이고 .min.css(공백x)로 설정할 수 있습니다.
03. savePath
default 값은 null이고, 현재 폴더(위치)에 css 파일을 컴파일링 합니다.
다른 폴더로 컴파일링 하고 싶으면 "~/../css"와 같이 경로를 입력합니다.
"~" : 현재 SASS 파일의 위치로부터 상대 경로를 적어줄 때 사용
"/" : 루트 경로
"~" : 현재 SASS 파일의 위치로부터 상대 경로를 적어줄 때 사용
"/" : 루트 경로
3. SASS Compile 사용
.scss 파일을 열고, VScode 하단 바의 Watch SASS를 클릭합니다. 그럼 Watching으로 바뀌면서
위에 설정해 놓은 위치와 포맷으로 저장할 때마다 scss 파일이 컴파일링 됩니다.
728x90
반응형
'Error' 카테고리의 다른 글
| Prettier 설치 및 설정 방법 (3) | 2022.09.05 |
|---|
댓글