모든 환경에서 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

 

 

-----------------------------------2025 바뀐 버전 sass 설치하기

 

(위의 버전은 구형이라 추천 안한다고 한다.)

 

1. npm install --save-dev sass : sass 설치

 

2. src 폴더아래 scss를 만들고 컴파일할 폴더 dist/css를 만든다.

 

3. package.json 에 추가하기

  "scripts": {
    "start": "react-scripts start",
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
     "sass": "sass src/scss:dist/css" // 여기 추가 - 자동컴파일
  },

 

4. 실시간 감지를 원할경우

"scripts": {
  "sass": "node-sass -w src/scss -o dist/css"
}

 

5. css.map파일 제거

"scripts": {
  "sass": "sass --no-source-map src/scss:dist/css"
}

 

6. SCSS 자동 빌드 + map 제거 + watch 모드까지 포함한 설정

"scripts": {
  "sass": "sass --watch --no-source-map src/scss:dist/css"
}

 

7. 최종 컴파일

npm run sass

 

😂 아 css파일의 경우 scss파일 위치로 import 하면된다.

//App.tsx

import './App.scss';

 

++ 이외 자동으로 컴파일을 원한다면 빌드도구를 따로 사용해야 한다고 한다.

++ 타입스크립트와는 별게라서 따로 type이 있는 라이브러리를 설치할 필요가 없다. 다만 css모듈을 사용할 경우에는 추가해줘야 한다고 한다.