[React] Scss 사용하기

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

Scss는 css를 더 유연하게 사용할 수 있게 해 주는 언어이다.

 

실제로 웹에서 적용할 때는 전처리기를 통해 css로 변환한 후 사용한다.

 

React에서 Scss 사용하기

yarn eject

eject 스크립트를 통해 webpack 설정파일을 끄집어낸다.

 

yarn add node-sass sass-loader

모듈 두개를 설치한다.

 

단 webpack의 버전에 따라 최신 버전의 node-sass, sass-loader를 사용할 수 없을지도 모른다.

 

나의 경우 webpack 4.39.1 을 사용하고 있는데,

이 경우 node-sass@5.0.0, sass-loader@10.1.0을 사용해야만 정상적으로 사용할 수 있었다.

(오류: typeerror this.getoptions is not a function)

 

webpack버전을 보고 올바른 버전의 모듈을 설치해야 한다.

 

잘 모르겠다면 webpack을 최신 버전으로 올리면 최신 버전의 모듈로도 정상 작동한다.

 

이후 webpack.config.js에서 다음 링크를 참조하여 설정을 완료한다.

 

https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6

React에 SCSS 적용및 기본 사용법(1)

 

Scss 문법

Scss는 css의 확장이므로 기존 css 문법은 당연히 사용 가능하다.

 

가장 유용하게 사용하고 있는 문법은 중첩 기능이다.

 

/* css */

.box{
  margin: 4px;
}

.box> .header{
  font-size: 2rem;
}

 

css에서 위와 같이 중첩을 사용할 때 상위 선택자를 계속해서 명시해야 하는데,

여간 귀찮은 일이 아니다.

 

/* Scss */

.box{
  margin: 4px;
  
  &>.header{
    font-size: 2rem;
  }
}

 

&는 상위 선택자로 치환되므로, 선택자 중첩 시 더 명확하고 간결하게 표현할 수 있다.

 

더 많은 사용법은 아래 링크를 참조하면 좋다.

 

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!