모든 환경에서 sass 사용하기

1.npm init  설치
2.node-sass 설치
3.scripts부분에 추가해 주기
sass : script 이름으로 자신이 원하는 이름을 생성하는 자리
실행시킬 내용 : 작성한 파일을 실행시키는 자리

예)"sass":":node-sass css/style.scss style.css"
4. npm run sass 시 반영되는것 확인
5.scss를 칠때마다 계속 4번을 해야하는 번거로움을 없애기 위해 

package.json 에 scripts 에 추가한다.

"sass":"node-sass -w -r css/style.scss style.css"    
로 변경하면 한번 실행 후 scss에 저장하면 바로 컴파일 된다!!

추가할경우 _파일명.scss(예: _common.scss)로 저장 한 수 메인 scss 파일에 컴파일 후 사용하면된다.

예)@import './common'; //파일명만 적을수 있음

"sass":"node-sass -w -r scss/style.scss -o ./css --output-style expanded"   

이런 방식으로 https://www.npmjs.com/package/node-sass 을보고 옵션을 뒤에 추가하면 된다. 
위는  -o, --output         Output directory 내가 만든 style.scss 이름따라서 해당 폴더 아래에 자동으로 css파일이 같은이름으로 생성됨
 --output-style expanded css정렬방식(CSS output style)이 설정됨 

반응형

참고: https://velog.io/@bohun-kim/sass-node-sass-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%84%A4%EC%A0%95

sass | node-sass 설치 및 설정

참고: https://www.npmjs.com/package/node-sass

node-sass