명령 프롬프트(cmd)로 scss 컴파일하기(+폴더위치설정)

vscode의 "live sass complier"를 사용하면 간편하게 설치가 가능하지만 npm를 사용해보고싶어서 남기는 기록

 

1. node.js 설치하기 (npm은 node를 관리하는 관리자)

https://nodejs.org/ko/

 

2. 윈도우 검색에서 cmd 열기

 

3. npm 버전확인(잘 설치되었는지)

npm -v

 

4. scss(sass) 설치하기

npm install sass -g

 

5. scss(sass) 버전 확인하기(잘 설치되었는지)

npm show sass version

 

6. 프로젝트에서 폴더를 나눠서 정리하기

 

7. cmd창에서 scss를 관리할 폴더위치 설정하기(내가 원하는 경로가 아닐 경우)

cd 뒤에 원하는 위치의 폴더 드래그하기(자동으로 폴더구조 나타내줌)

cd C:\User\project\scss

 

8. 컴파일하기

sass style.scss style.css

8-1. 폴더위치를 바꾸고 싶을때 (ex.scss와 css를 다른 폴더구조로 관리할 때)

sass style.scss ../css/style.css

 

9. 자동 컴파일 (중단할시에는 ctrl + c)

sass --watch style.scss style.css

9-1. 폴더자체의 변화감지, 컴파일

sass --watch scss:css

9-2. 소스맵이 생성되지 않게

sass --no-source-map style.scss style.css

 

10. 압축된 css로 컴파일하기(파일용량↓, 속도↑)

sass --style=compressed style.scss style.css