node.js node-sass 2차 충격

처음에 알고있는 기본적인 트리구조는 프로젝트 파일에 index.html, css, image, js, assets 파일과 폴더 정도였다.

 

내일채움으로 배우던 과정 중에 이런 트리구조를 처음 배우고 익숙해지기도 전에

기회가 닿아서 리액트로 앱을 만드는 미니프로젝트가 있었는데 그때 충격을 받았다.

 

노드를 해당 프로젝트에서 설치하고 필요한 기능들을 설치하고 package.json에 스크립트를 추가해주고

사용하는 과정이 지금에서야 감이 오지만 그땐 터미널을 처음써보기도 했고.

html 헤드태그에 script, link 태그로 불러오면 되는데 터미널써가면서 node를 사용하는지도 궁금했다.

(대부분의 유용한 기능은 cdn으로 나와있진 않은거 같다고 이해하고 있다.) 

 

node-sass를 설치해서 사용하는 방법

 

1. 브라우저 검색을 통해 node를 설치한다.

2. 해당 프로젝트 파일 경로로 가서 'npm init -y'로 node-modules, package-lock.json, package.json 파일 생성한다.

3. node-sass 홈페이지 usage를 참고해 'npm i node-sass'로 node-sass를 설치한다.

4. 사용하기 위해 package.json파일에 scripts 에  

 "node-sass": "node-sass",

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

 다음을 추가 해준다.

 

참고로 dependancies에 해당 프로젝트에 깔린 기능들이 버전과 함께 표기된다.

scripts에 남기는 형식도 공식문서에 적혀 있기 때문에 그것에 맞게 작성해주면 된다.

 

노드사스의 경우에

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

node-sass

-w, --watch Watch a directory or file

-r, --recursive Recursively watch directories or files

--source-map Emit source map

 

이 세가지를 써준다.

-w은 이 뒤에 적힌 sass파일을 변환하겠다.

-r은 재귀적으로 파일을 변환하겠다는데. 하위 폴더의 파일을 찾아서 변환한다는 것 같다. 이 옵션을 쓰지않으면 같은 뎁스에 있는 파일만 변환하고.

 

--source-map은 개발자도구로 어느 부분에 입력한 코드 인지 알 수 있게 해줘서 아래와 같이 사용하면 되겠다.

 

 

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