Node.js SCSS설치하기

Node.js 설치하기

분명 나는.. 인강을들으며 다 설치를 했는데.. 이걸 다시 사용하려니 원체 생각이 안나는거다.. ㅠㅠㅠ
어디가서 나 Node.js 써봤다.  Sass, SCSS  써봤다!  라고 말을 해도 설치를 할 줄 몰라서 버벅이고 싶지 않아서 velog에 글을 써놔야 겠다 마음을 먹었다. 잊지말자 설치법!!

https://nodejs.org/en/  
우선 Node.js 패키지부터 설치 하자

LTS버전이 Current 버전에 비해 안정적이므로 'LTS' 버전 설치를 극구 추천합니다.😅😅

현재는 v-16.13.1 로 되어 있지만 언제나 바뀔 수 있다는 점-

패키지 설치 이후 VSCODE 내의 콘솔창이든 터미널이든 들어가서 node -v 명령어를 통해 버전이 제대로 설치 되었는지 확인하자

npm

Node.js를 설치하면 자매품으로 딸려오는 제품이 있다.
바로 npm으로

npm 또한 npm -v 명령어 입력시 버전이 잘 뜰 것이다 😊

이제 VSCODE에서 npm init -y 를 입력하면 (해당 폴더인지 잘 확인하자)

package.json이라는 파일이 생성될 것이다.
이 package.json 파일이 있어야 우리가 필요한 Node modual들을 다운 받아 사용할 수 있다

Node-sass

https://www.npmjs.com/package/node-sass
(들어가서 확인을 해도 되고 바로 진행해도 될 것 같다)


npm i node-sass 를 콘솔창에 적어주면 잠깐의 설치 이후
node_modules 파일이 생성되고
package.json파일내에

node-sass 가 추가되었음을 확인 할 수 있고 package-lock.json 또한 추가가 되어있음을 확인할 수 있다!
(아아.. 멀고도 험난하다-)

scripts 란에 "node-sass" : "node-sass" 를 추가하고 터미널에 npm run node-sass 를 작성하고 엔터 팍! 하면.. 오류가 난다.. 오류가 나..

이렇게 오류가 난다.
이후 Node-sass 홈페이지로 가서

체크한 내용을

아까 node-sass 를 적은 밑에 바로 적어주자
아까 Example을 그대로 적으면 디렉토리가 맞지 않기 때문에 main.scss 와 style.css의 경로를 적어주자

scss 파일내에 아무 태그나 좀 적어주고

콘솔창에 npm run sass를 적어주면

style.css 파일이 생성되게된다!
(안에 입력된 값은 개의치 말자.. 보여주기 위함이니 원래는 아까 적은 태그가 들어가 있을 것이다!)

npm script 업데이트

항상 .scss 내용이 업데이트 될때마다 npm run sass를 실행시킬 수는 없는 노릇이니 node-sass option을 살펴보자!

-w, --watch , -r, --recursive를 입력해주자
-w를 넣어주면 .scss에 입력하고 세이브 해주면 실시간으로 .css 파일에 내용이 업데이트 된다!

--source-map true를 적어주게되면 크롬 개발자도구에서 각각의 선언이 어떤 scss파일에서 선언되었는지 확인할 수 있다.

추가사항 ) /*# sourceMappingURL=styles.css.map */을 _reset.scss파일 내에 작성해주면 되더라..? 왜지? .css파일에만 입력되면 되는건가?

prettier & SCSS lint 설정

후딱 리포지토리에 .sass-lint.yml 파일을 생성하고 내용으로는

https://gist.github.com/donato14/6f4b057ea78e0520867eeb7a5e253d93
의 코드를 모두 붙여 넣기 해주자
그러면 이제 확장프로그램에서 받은

scss-lint가 나의 코드를 지적해주지 않을까? 라고 생각을 했다...

하지만 ㅋㅋㅋ

쉽게 해줄리가 없지..
끊임없는 버그로 인해 다음 글에 lint를 사용하기 위한 방법들을 몇가지 메모해놓겠다..ㅠ

일단 prettier 부터 설정을 하자
.prettierrc 파일을 생성해주고 command + , 를 눌러 setting 을 열고 format on save를 검색하여

Format On Save가 초ㅔ크 되어 있는지 확인해주자!!
이후 prettier config 를 검색해서

체크되어 있는지 확인해주자

바쁘다 바빠 확장 프로그램 창에서 Prettier를 선책해서 내용을 보면 Default Formatter 에 또 코드가 있다

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

(착하게도.. 가져왔다.. 내가 쓰려면.. 가져와야지)

위에 Open settings(JSON) 을 클릭해서

그대로 복사해줍시다!

semi 는JavaScript에서 세미콜론을 안써도 되게 해주며
endOfLine은 저장시에 마지막 한칸은 new line으로 만들어주는 코드이다.