-
안녕하세요 요즘 해외에서는 디자인쪽으로 핫한 Google의 Material를 웹스톰에 적용하는 방법에 대해서 알아보겠습니다.
국내에서는 많이 사용하지는 않지만 그래도 하고 싶은 분들을 위해서 포스팅을 하겠습니다.
https://material.io/에 들어가시면 안드로이드, ios, 웹에서 가져다 사용할 수 있도록 지원하고 있습니다.
제가 볼때는 스타트업에 디자이너가 없을 경우에는 매우 효율적이고, 개인 개발자에게도 엄청 효율적이라고 생각이 됩니다.
기본적인 css 를 제공을 하며, 이것을 커스터마이징 할 수 있게 sass, scss등을 제공해서 재정의 할 수 있게 지원합니다.
https://github.com/material-components 깃허브에 들어가시면 안드로이드, ios, web 3가지가 보이는데 저는 web 세팅을 알려드리겠습니다.
https://github.com/material-components/material-components-web 여기나 홈페이지에 보시면 사용설명 및 데모 버전이 있습니다.
하지만 웹스톰에서의 설정방법은 없습니다.
예전에 이것을 해보는데 시간도 조금 걸렸고, 멘붕도 걸리고 해서 웹스톰을 사용하시는 분들을 위해서 설정방법에 알아보겠습니다.
Scss, Sass를 자동적으로 CSS로 변경하기 위해서는 Ruby를 설치해야 하며, 루비를 설치한 후에 Ruby 콘솔에서 gem install sass, gem install scss 2개의 명령어로 설치 해줍니다.
cmd 창이나 웹스톰 터미널 창에서 npm install --save material-components-web 명령어를 실행하면 node_modules폴더 안에 생성이 됩니다.(웹스톰에서 node.js를 기본 생성을 한다면 node_modules/material-components-web 이 생기며, node_modules/@material 폴더가 생기게 됩니다.)
File > settings > Tools > File Watchers에 들어가셔서 플러스 버튼을 눌러서 Scss or Sass을 선택해주세요(File Watchers가 없다면 웹스톰 버전을 업데이트를 해주시거나 아니면 플러그인을 설치해 주세요)
1. Scss 설정
Program : Ruby\bin\scss.bat
Arguments : --no-cache -I Project Path\node_modules --update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh : $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
2. Sass 설정
Program : Ruby\bin\sass.bat
Arguments : --no-cache -I Project Path\node_modules --update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh : $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
이렇게 하면 하시면 Sass, Scss설정이 끝났으며 I의 옵션을 작성 후 꼭 Project Path/NODE_MODEULS의 인자값을 꼭 추가 해셔야 됩니다.
제가 볼때는 이렇게 하면 끝이 나야 하는 웹스톰의 버그인거 같은데 direct 폴더를 입력 해야 경로를 제대로 찾게 됩니다.
File > Settings > Directories 에 가셔서 node_modules을 클릭 후 Resource Root를 설정해 줍니다.
두번째로는 +Add Content Root를 클릭하신 후에 Project Path\node_modules을 추가 해주시면 됩니다.
이렇게 하시면 모든 세팅이 완료되시고 scss나 sass에 메뉴얼대로 @import를 해서 커스터마이징한 css를 생성해서 사용할 수 있게 됩니다.
이것으로 웹스톰에서 구글 Material를 설정하는 방법에 대해서 알아보았습니다.
