windows IntelliJ에서 scss 사용하기

React가 아닌 vanilaJS를 다룰 때 scss를 사용하고 싶은데 WebStorm에서는 검사기에 따로 설정을 해줘야한다.

 

0. NodeJS 설치

 https://nodejs.org/en/download/

Download | Node.js

 

당연하지만 노드는 다운 받아야한다.

 

1. sass 설치

---

npm i -g sass

 

번들러가 따로 있다면 글로벌로 설치하지 않아도 좋다.

windows에서는 node-sass를 사용하지 않고 sass를 사용함에 조심해야한다!

 

2. File Inspector 설정

---

 

내 WebStorm은 설치부터 한글이 기본이라서 '파일 감시기' 지만, File Inspector로 나온다.

위의 툴바의 + 버튼을 눌러 Sass, SCSS를 추가해주자.

 

 

 

처음 실행하면 프로그램 부분이 sass 이렇게 되어있을 텐데,이 경로로 바꿔주면 된다.

 

프로그램

C:\Users\YourUsername\AppData\Roaming\npm\sass

인수

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

새로고침할 출력 경로

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

 

3. 테스트

---

설정 완료한 다음에,

어디에서나 *.scss를 만들어보자!

 

.css.map과 .css 가 생성된다면 ok!

이제 우리 WebStorm 사용자들도 scss를 사용할 수 있다!