Sass(SCSS) 를 사용하기 위해 node-sass 모듈을 설치하는 방법과 사용하는 방법을 알아보자.
node-sass 패키지 설치
프로젝트에서 Sass를 사용하려면 Sass 모듈을 설치해야 한다.
Sass 모듈을 설치할 수 있도록 먼저 터미널에 npm init을 입력하고 실행하자.
npm initnpm init을 입력하고 실행하게 되면 package.json파일이 생성되면서 의존성 모듈을 설치할 수 있게 된다.
npm install node-sass이 명령어는 node-sass 패키지와 그 의존성을 node_modules 디렉토리에 설치한다. 이제 node-sass 패키지를 코드에서 사용할 수 있다.
node-sass 사용하기
Sass(SCSS)를 사용하기 위해서는 .scss라는 확장자를 가진 파일을 만들고 CSS 스타일링을 할 때와 같이 스타일링 코드를 작성하면 된다. 하지만 scss파일은 css파일이 아니므로 css파일로 컴파일(변환)해주어야 한다.
package.json 파일에서 script를 추가하여 npm run <생성한 스크립트> 로 script를 실행하면 scss파일을 css파일로 컴파일하도록 만들어보자. 다음과 같이 script에 sass라는 이름의 script를 추가해보자.
"sass": "node-sass styles/main.scss style.css"
node-sass styles/main.scss style.css의 뜻은 style 디렉토리에 있는 main.scss파일을 package.json 파일이 있는 디렉토리의 style.css 파일로 컴파일시키라는 뜻이다.
터미널에서 npm run sass를 실행하면 sass script가 실행이 되면서 main.scss파일이 style.css로 컴파일 된다.
하지만 한 가지 단점이 있다. scss파일을 수정할 때마다 컴파일을 실행시켜 줘야 한다는 점이다. 그래서 우리는 script에 몇가지 옵션을 추가해서 scss파일을 저장할 때마다 자동으로 컴파일이 되도록 만들어 줄 수 있다.
-w,--watch: Sass 파일이 변경되어 저장될 때마다 CSS 파일로 자동 컴파일한다.-r,--recursive:main.scss파일 뿐만 아니라 관련된 모든 파일들이 수정되고 저장되면 이를 인지시킨다.
script에서는 node-sass 다음에 -w이나 -r 옵션을 입력하여 수정하도록 하자.
"sass": "node-sass -wr styles/main.scss style.css"
혹은
"sass": "node-sass -w -r styles/main.scss style.css"node-sass와 Node.js 버전과의 호환성 문제
최신 node 버전에서 npm install node-sass를 실행하면 code 1이라는 에러가 나며 설치가 안된다는 사례가 있다. node의 버전과 node-sass의 버전이 호환되지 않아서 발생하는 문제인데, 다음은 node버전과 그에 호환되는 node-sass 버전을 정리한 표다.
해결 방법은 다음과 같다.
-
node.js의 버전을 낮추기.
-
package.json을 수정하여 node-sass를 설치하지 않거나 node-sass대신 sass를 설치하기.
-
node-sass의 버전 높이기.
-
node-sass 대신 dart sass 사용하기.
참조 사이트
