맥(Mac) os + phpstorm(webstorm) 에서 SCSS 설정

macos ventura 에서 설정

 

컴파일러 모듈 설치

brew install nodejs
npm install -g sass
npm install --global less
npm install -g csso-cli

node js 의 경우 여러 설치법이 있으나, brew 로 최신 버전으로 설치하였음

실제 모듈이 설치되는 위치는 개인의 환경설정과, 맥OS 버전에 따라 다를수 있음.(다른 경우 full 경로 지정)

phpstorm 에서 설정 추가 

• Phpstorm Tools -> FileWatchers 설정에서 SCSS, CSSO CSS Optimizer 추가
• SCSS Arguments 에 --no-source-map 옵션을 추가하여 문제가 map 파일이 생성되지 않도록 함.
  • Arguments: --no-source-map $FileName$:$FileNameWithoutExtension$.css
  • Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
  • Working directory: $FileDir$