NPM에서 SASS(scss) 파일을 CSS로 컴파일(node-sass)

NPM에서 SASS(scss) 파일을 CSS로 컴파일(node-sass)

SASS 파일을 CSS 로 컴파일 하는 방법 중 Ruby를 사용하는 방법과 NPM을 사용하는 방법이 있는거 같다. 둘다 SASS 컴파일러를 다운받기 위한 방법인거 같다. 

GitHub에서 오픈 소스를 받아서 사용하려고 했지만 css 파일을 원했는데 sass 란 파일이 있어서 당황스러웠다. 

sass 파일부터 무엇인지 조사를 하게 되었고 css 파일로 컴파일이 가능한 언어인것을 알게 되었다. 

sass 파일을 css 컴파일 하는 방법을 조사하니 Ruby 라는 것과 NPM 이라는 것이 나왔는데....

뭔가 계속 새로운 것을 배우고 있다.

Ruby를 사용해서 컴파일 하는 방법은 관련글을 작성했고 이번에는 NPM 에서 관련 모듈을 다운받아 컴파일을 시도 하려 한다.

Ruby를 사용한 컴파일 방법 : http://startup-blog.tistory.com/4

 

사전에 NPM 이 설치 되어 있어야 한다.

NPM 설치 방법 : http://startup-blog.tistory.com/3

NPM 설치 후 CMD 창을 열고 다음 명령어를 치자. 옵션에 -g 가 있으면 글로벌 영역에 설치된다.

npm install -g node-sass

C:\Users\Lee\AppData\Roaming\npm\node_modules\node-sass 이 경로로 설치되었다는 설명을 볼 수 있다.

SASS 파일을 CSS 파일로 컴파일 하기

파일 하나를 컴파일하는 명령어는 구조는 다음과 같다.

node-sass [options] <input.scss> [output.css]

1. 파일 한개 컴파일 시 

node-sass [options] <input.scss> [output.css]

2. 모든 폴더의 파일을 컴파일 시

node-sass my-sass-folder/ -o my-css-folder/

3. SASS 파일이 수정될 경우 자동으로 컴파일 되도록 하기

node-sass -w sass/ -o css/

-w 옵션이 파일이 변경되는 것을 감시해주는 옵션이다.

실행할 경우 아래 그림처럼 컴파일되는 것을 볼 수 있다.