[Sass project] 1. node-sass 설치&설정

0. vscode에서 terminal을 열어준다.

 

1. package 생성 후에 node-sass 설치

npm init -y
npm i node-sass

 

 

 

 

3. package.json "scripts" 부분을 수정해준다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass",
    "sass": "node-sass styles/main.scss ./style.css",
    "sass:watch": "node-sass --watch"
  },

 

 

4. 확인

main.scss에 아무 코드 입력후, npm run sass해주면, main.scss에 썼던 코드가 style.css에 그대로 나타난다.

이렇게 잘 실행되면 설치 끝!

 

 

 

node-sass 관련 내용은 아래 링크에서 확인

https://www.npmjs.com/package/node-sass

 

추가로 아래의 -wr 옵션을 추가해주면 좋다.

"sass": "node-sass -wr styles/main.scss style.css"

    -w, --watch                Watch a directory or file
    -r, --recursive            Recursively watch directories or files