[scss/sass] scss 설치 및 컴파일하기(watch)

1. npm으로 설치 및 실행하기

 1.1 설치

npm install -g sass

설치가 왼료 되어도 node_moduls 폴더가 생기거나 package.json 파일이 생성되지는 않는다.

따라서 잘 설치 되었는지 확인 하려면 

sass --version

명령어를 입력해서 sass 버전이 출력되면 설치 성공!!

 

 1.2 Compile 및 watch

 브라우저는 scss, sass를 읽지 못한다. 따라서 브라우저가 읽을 수 있는 css 문서로 변환을 해주어야 하는데, 이것을 컴파일 이라고 한다. 컴파일은 .scss 문서를 변경 할 때마다 되어야 하므로 watch 라는 명령어를 사용해서 파일의 변화를 항상 '감시' 하도록 해줘야 한다. 

/* 개별파일을 컴파일 하고 싶을 때 */
sass --watch 파일이름.scss 파일이름.css

/* 디렉토리 지정 하고 싶을 때 */
sass --watch 디렉토리/파일이름.scss:디렉토리/파일이름.css

 

폴더 단위로 컴파일을 하고 싶을 때에는 다음과 같은 명령어를 입력한다

sass --watch scss파일있는폴더:css파일있는폴더

/* 예시 */
sass --watch scss:css
// scss 폴더에 있는 파일들을 몽땅 컴파일 해서 css 폴더에 넣어줘라

 

scss파일의 내용을 변경 했을 때, 터미널에 다음과 같은 문구가 나타나면 컴파일 성공!

 

 

2. VScode 익스텐션 사용하기

2.1 설치

 vscode 익스텐션 검색창에서 sass를 입력 하면 다음과 같은 확장프로그램을 설치할 수 있다.

앞구르기 칠천번 하면서 봐도 컴파일러 처럼 생겼다.

 

설치 후에, 화면 하단에 있는 whatch Sass 버튼을 눌러준다

 

그러면 whatching.... 이라는 문구가 아련하게 뜨면서 디렉토리에 어쩌구.css.map 이라는 파일이 새로 생성된다.

물론 컴파일 된 css 파일도 생성된다. 

.map 파일은 html에 직접 적용되는 파일은 아니지만 scss 파일과 css 파일을 맵핑해주는 용도라고 보면 된다. 

 

 

 2.2 컴파일된 css 파일의 경로를 지정하고 싶을 때

 

설정(ctrl + ,) - 검색창에 sass 검색 - 사이드바에서 Live Sass Compiler 선택 - ssettings.json 편집

 

 

  -> save path 안에 경로 지정해주기

      "liveSassCompile.settings.formats": [
        {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "/css",
          "savePathReplacementPairs": null
        }
      ],

 

아무래도 gui방식이라 확장프로그램 사용이 훨씬 쉽게 느껴질 수 있지만

사용법을 알고나면 npm이나 확장프로그램이나 그게 그거다.

우리는 간지나는 개.발.자.니까 npm도 익혀두자.(라고 말하지만 크게 실익은 없다. 나는 알아만 두고 그냥 확장프로그램 쓴다.)