intellij에서 SCSS를 style.css로 컴파일 하기.

VS 코드만 사용하다가 요즘에 인텔리제이로 작업을 하다보니.. 난관에 많이 부딫히고 있다.

특히 이것저것 설정하는게 너무 어렵다. 이제 단축키는 어느정도? 익숙해 진 듯 하다.

(방금도 단축키 하나 외웠다. alt + F12 터미널 열고, 닫기)

 

지금 내가 맡고 있는 운영 프로젝트중에 SCSS파일이 살아있는 게 있다. (보통 css파일 하나로 퉁쳐서 받기 때문0..)

따라서 인텔리제이에서 scss파일들을 style.css로 컴파일 하는 방법을 찾아보았다.

 

이미 많은 구글선배님들이 방법을 알려주셨고,

초기 세팅은 따라 하되 디테일한 설정은 gpt와 함께.. 해쳐갔다.

 

일단 내 scss, style.css 파일의 폴더 구조는 이렇다.

저 scss폴더안에서 작업을 하면 css폴더의 style.css파일에 컴파일 되는거다. 저 파일이 웹사이트에 바로 적용되는거고.

(배포할 때 는 style.css만 올리면 되니까..)

일단 File의 Settings 로 들어간다.

나는 이미 설치해놨지만, 설치 안되어 있는 사람은

plugins 가서 'File Watchers' 를 설치하면 되겠다.

 

설치하고 나면 상단에 '+'기호를 눌러 SCSS든 Sass든 필요한걸 추가한다.

 

 

SCSS를 더블클릭해서 들어가면 설정창이 나온다. 여기서 나는 1시간 이상을 .. 보냈다.

일단 File type에 'SCSS style sheet'를 선택한다.

Scope는 project files 로 설정.

 

밑에는 이제 알아서 하면 된다. 

 

...

일단 program 은 'C:\Users\사용자이럼\AppData\Roaming\npm\sass.cmd'   로 선택.

Arguments에는 style.css가 저장될 위치  '$ProjectFileDir$/src/main/webapp/assets/css/style.css'

Output paths to refresh 에는 style.map 위치. (이게 있어야 어떤 scss파일에서 수정했는지 개발자도구로 확인 할 수 잇으니까)

Working directory에는 scss폴더 위치 선택.

(잘 안 되면 gpt에게 물어보면서 하시 길..)

 

그리고 OK를 누른다. 

 

확인해본다.

#wrap에 뜬금없이 background: green; 속성을 넣는다.

최종 저장되어야 할 stylel.css에 background: green;이 추가된 것을 확인!

 

**참고로 내가 시간이 더 오래 소요된 이유는 내 잘못이다.

이 컴파일 과정은 node버전이 낮으면 안 된다.

내가 현재 운영하는 프로젝트중에 낮은 node 버전을 사용하는 경우가 있어, 10.16.3으로 바꿔놓은 상태였던 거다.

 

아래처럼 다시 16.16.0 을 선택해서 재실행을 했더니 되더라...