[SCSS] 웹스톰(Webstorm) SCSS 컴파일

SCSS 파일을 CSS 파일로 변환하기 위해서는 여러 가지 방법이 존재한다.

sass-loader를 사용할 수도 있고, CLI에 명령어를 입력할 수도 있고, IDE에서 제공하는 기능을 사용할 수도 있다.

나는 웹스톰을 사랑하기 때문에.. 웹스톰의 File Watchers를 설정해서 컴파일했다.

File Watcher를 사용하면  SCSS 파일이 변경될 때마다 자동으로 CSS 파일로 컴파일하도록 설정할 수 있어서 매우 편리하다.

---

1. sass를 설치한다.

나는 전역으로 설치했지만, 필요에 따라 프로젝트에 설치해도 된다.

 npm i -g sass

---

2. Settings > Tools > File Watchers에 들어가서 SCSS Template을 추가한다.

---

3. 컴파일 상세 설정을 해준다.

주로 설정해야 할 것은 Tool to Run on Changes 부분이다.

• Program
  설치한 sass 패키지의 경로를 설정한다.
  나는 전역으로 설치했기 때문에 AppData > Roaming > npm > sass 로 설정했다.
• Arguments
  SCSS파일을 CSS 파일로 컴파일할 때 사용되는 인자들을 설정한다.
  별도의 옵션을 설정하지 않으면 입력 파일과 출력 파일의 이름만 지정한다.
• Output paths to refresh
  변환된 CSS 파일과 소스맵 파일을 저장할 경로를 설정한다.
  별도로 설정하지 않으면 SCSS 파일이 있는 디렉토리에 동일하게 CSS 파일과 CSS 소스맵 파일을 생성 및 갱신한다.
• Working directory
  File Watcher가 실행되는 작업 디렉토리 경로를 설정한다.
  별도로 설정하지 않으면 현재 편집 중인 파일이 위치한 디렉토리를 작업 디렉토리로 설정한다.

---

File Watcher 설정을 마치고 SCSS 파일을 작성한 후 저장하면?

@mixin btn-list {
    button {
        margin-left: 5px;
        height: 30px;
        font-weight: bold;
    }
}

.sidebar {
    @include btn-list;
}

File Watcher에 의해 css 파일로 변환된다!

.sidebar button {
  margin-left: 5px;
  height: 30px;
  font-weight: bold;
}

이제 이 css 파일을 import 해서 사용하면 평소처럼 css를 적용할 수 있다!

<link rel="stylesheet" href="/css/common.css">