[IntelliJ] CSS를 좀 더 스마트하게! SCSS 설치하기

맨날 이론강의만 듣다보니 다시 프론트 코딩이 하고싶어져서 찾던 도중에, 예전에 강의에서 들었던 SCSS를 인텔리제이에서도 쓸 수 있을까 하고 알아보았다. 대부분이 그렇듯 항상 내가 원하는 정보는 외국어로만 나와있더라...

 

흑흑 한 단계 한 단계 정리해보겠다.

 

일단 기본적으로 원문은 아래의 링크를 참고했다.

 

intelliJ SCSS 관련 도큐먼트

Sass, Less, and SCSS - Help | IntelliJ IDEA

 

SCSS설치 전 필수 설치 자료(Node.js, File Watchers)

Node.js 바로가기

Node.js

노드는 위의 링크에서 받으면 된다.

 

IntelliJ 실행후 Setting/Preferences로 들어가(단축키 Ctrl + Alt + S) Plugins에서 File Watchers를 설치한다.

 

File Watchers는 특정 파일의 변동사항을 추적해주는 플러그인으로, SCSS를 작성하고 저장할 때마다, 변동된 사항을 CSS로 컴파일 해주기 위해 해당 플러그인이 필수로 들어간다.

 

이후 IntelliJ에서 Terminal을 켜 Sass/SCSS와 Less를 설치해준다.

npm install -g sass

npm install --global less

위의 과정으로 SCSS를 사용할 준비는 얼추 끝났다.

SCSS를 작성할 순 있지만, 우리는 이 코드들이 자동적으로 CSS로 바뀌길 바라기 때문에, 자동으로 컴파일 되게 해주기 위해서는 File Watchers에서 해당 SCSS파일이 생성되면 자동으로 추적해줄 수 있게끔 설정을 해주어야 한다.

 

우선 File Watchers의 설정을 해주기 위해 다시 Setting/Preferences로 들어가준다.(단축키 Ctrl+Alt+S)

이미 SCSS가 설정이 되어있지만 차례차례 해보자. 

Tools -> File Watchers를 들어간 뒤, Alt + Insert 혹은 좌 하단의 + 버튼을 누른 뒤, 실시간 추적하려는 툴을 골라준다. Less나 Sass나 SCSS나, 본인이 사용할 툴을 고르면 된다. 나는 SCSS를 사용할 것이기 때문에 SCSS로 생성하겠다.

 

 

SCSS를 누르면 아래와 같은 창이 뜬다.

대체로는 이대로 놓고 사용해도 된다.

나는 별 다른 설정 없이 위와 같은 상태로 놓고 OK를 눌러주었다.

 

이후, resources의 static 안에 stylesheet로 SCSS를 생성한다.

SCSS가 정상적으로 설치가 되었다면 아래와 같이 SCSS, Less Sass 등의 스타일 시트가 뜰 것이다.

css로 컴파일되면서 SCSS와 같은 이름으로 되니, html에 stylesheet로 추가될 css 이름과 같게 SCSS를 생성해준다. 나는 html에서 style.css를 불러오고 싶으니, style.scss파일을 만들어주도록 하겠다.

만들자마자 SCSS가 만들어진 디렉토리의 SCSS파일 아래로 css 파일이 생성된 것을 볼 수 있다. 이게 SCSS아래에 다른 경로가 있는 것 같아 보이지만

실제로 본다면 SCSS와 같은 폴더 안에 css파일이 컴파일된다.

style.css.map을 보게되면 아무것도 적지 않았는데도 뭔가가 써져있다.

해당 정보들은 SCSS가 컴파일할 때 쓰인다고는 하는데(솔직히 이 부분은 잘 모르겠다.),

별 내용이 안 적혀있는걸로봐서는 아직 아무것도 안적었기 때문인가 생각해본다.

 

자 이제 테스트를 해보자.

 

SCSS가 매력적인 부분 중 하나는 프로그래밍에서 변수를 설정하는 것 처럼, 스타일을 저장해놓을 수 있다는 것이다.

위와 같이 배경 색을 미리 지정해놓고, 필요한 곳에서 변수를 호출하듯이 부르면 적용이 된다는건데, 

css파일에는 이렇게 자동으로 #ff6464라는 색으로 변환되어 컴파일된다. 진짜 처음 SCSS를 알았을때는 이게 무슨.. 하면서 어이없어했던 기억이 아직도 난다.

스타일이 들어가니 .map 파일도 뭔가가 써졌다.

오케이 이렇게 부끄러운 테스트 화면도 잘 출력되는걸 보니 File Watchers도 잘 작동하고 있는 것 같다.

SCSS를 IntelliJ에 사용하려면 위의 방법을 사용하면 될 것 같다.