[Sass/SCSS] Sass/SCSS 시작하기 - 셋팅

#1. node 설치

1. node 는 하단 링크에서 각자의 컴퓨터 사양에 맞게 설치하자.

- LTS(Long Term Support, 장기 지원 버전) 설치 권장 : 큰 버그 없이 안정적으로 사용가능한 버전 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

2. 터미널에서 하단 키워드를 입력후 버전 정보가 잘 나온다면 설치가 잘 된 것이다. 

node -v

 

3. 터미널에서 하단 키워드 입력하여 package.json 생성하기

- 생성된 package.json 에서는 node module을 사용하기 위한 여러가지 셋팅을 설정할 수 있다. 

- 우리가 사용할 sass도 여기에 설치할 것임.

npm init -y

 

 

#2. node-sass 설치하기

1. 터미널에 하단 코드 입력하여 node-sass 설치

npm i node-sass

-> node-modules폴더가 생성

-> package.json 내 dependencies 에 node-sass 추가됨

-> package-lock.json 파일 생성 : 왠만하면 건들지 말자

 

2. package.json의 "scripts" 에 node-sass 를 추가한다. 

- 설치된 node-sass (node-module)은 script에 추가해야 사용 가능하다. 

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass",
  },

 

3. package.json의 "scripts" 에 sass를 정의해준다. 

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

- styles/main.scss 를 ./style.css로 변환해준다. 

- scss 경로의 폴더와 파일은 생성해 줘야한다. 

 

2, 3 까지 들어간 예

 

4. styles/main.scss의 스타일을 수정한후, 터미널에서 npm run sass 입력

- 설정된 scss파일을 css로 랜더링 하는 것이다. 

npm run sass

성공적으로 css에 랜더링 되었다면 다음과 같이 뜬다.

 

5. ./style.css 파일도 잘 적용되었는지 확인해보기.

- 잘 적용되었다면 이제 이렇게 sass를 사용하면 된다!

둘다 잘 적용됨

 

 

* 기타 nods-sass에 관한 정보는 아래 링크를 참고하자

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

node-sass