visual studio 에서의 scss

1) visual studio에서 newstyle.scss 파일을 만든다.

2) vscode에서 터미널을 열어 명령어를 입력한다. (터미널은 단축키 [Ctrl + `]로 연다)

   

   npx sass --watch css/newstyle.scss css/newstyle.css 

 

- npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻입니다.
- --watch : 소스에 변형이 일어날 때마다 자동으로 컴파일을 시켜주는 명령어입니다.
- css/newstyle.scss css/newstyle.css : 'css폴더 안의 newstyle.scss가 css폴더 안의 newstyle.css파일로'라는 뜻입니다.

 

초록색 글씨를 보면 compile이 성공됐다는 뜻!

 

css 폴더 안을 보면 이미지처럼 newstyle.css.map 파일이 만들어진 걸 볼 수 있다.

 

3) scss 파일에 작성한다.

 

왼쪽 사진은 scss파일에 작성한 것이고 오른쪽 사진은 그 작성한거에 따라 css에 적용된 모습이다!

 

html 파일에는 일반 css파일을 연결시켜준다. 

출처: https://anerim.tistory.com/192 [디발자 뚝딱]