VSCode Live Sass Compiler

VSCode Live Sass Compiler

 

VSCode Live Sass Compiler는 SASS/SCSS 파일을 CSS 파일로 실시간 compile/transpile 해준다.

 

특징

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable exported CSS Style (expanded, compact, compressed, nested).
• Customizable extension name (.css or .min.css).
• Quick Status bar control.
• Exclude Specific Folders by settings.
• Live Reload to browser (Dependency on Live Server extension).
• Autoprefix Supported (See setting section)

사용법

1. VSCode Extension에서 'Live Sass Compiler'를 검색 후 설치한다.

2. settings.json 에서 css파일의 압축 여부, 이름, 파일 경로 등을 설정한다.

명령 팔레트(Ctrl+Shift+P)에서 'settings' 입력하고

'기본 설정: 설정 열기(JSON)'을 선택하면 settings.json 파일이 열린다.

자세한 세팅은 Settings Docs을 참고한다.

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

3. 컴파일하고자 하는 scss 파일을 연 상태에서, VSCode Statusbar에 있는 Watch Sass 클릭한다.

4. settings.json에서 설정한 대로 dist/css 폴더 안에 css로 컴파일된 파일이 생성된다.

참고 : https://github.com/ritwickdey/vscode-live-sass-compiler