[React] 리액트에서 Scss 적용하기

책

Velopert

컴포넌트 스타일링하기

정해진 방식은 없다. 회사마다 요요구하는 스펙이 다르고, 개발자 취향마다 다르기 때문에 여러가지 방식 중에서 자신에게 맞는 방식을 선택한다.

• CSS : 일반적인 CSS
• Sass : Sass, Scss를 포함, 확장된 CSS문법
• CSS Module : CSS클래스가 충돌하지 않도록 파일마다 고유한 이름 생성
• styled-components : 자바스크립트 내부에서 스타일을 적용

CSS

일반적인 CSS를 작성할 때 중요한건 CSS 클래스를 중복되지 않게 작성하는 것이다.

이를 위해서 이름 짓는 규칙을 준수한다.
클래스 이름에 컴포넌트 이름을 포함시켜 중복된 클래스를 방지할 수 있다.

다른 방법으로는 CSS 선택자 문법으로 작성하는것이 있는데, 조합 선택자로 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다.

Sass 사용

Syntactically Awesome Style Sheets는 CSS 전처리기로 복잡한 작업을 쉽게할 수 있다.
재사용성, 가독성 측면에서 우수하다.

Sass는 .scss, .sass확장자를 지원하는데, 이 둘의 차이는 세미콜론과 중괄호의 유무에 있다.
.scss는 세미콜론과 중괄호를 필요로 하는데반해, .sass는 세미콜론과 중괄호 없이 작성가능하다.

이 블로그의 스타일도 scss확장자로 작성된 Sass를 사용한다.

블로그 처음에 만들때 이 ‘이 코드는 무엇인고… CSS비슷한거같긴한데,,,’ 이러면서 조금 건드려본 기억이 있다.
이 기회에 조금 공부해보려한다.

설치

이 책에선 sass@4.14.1 버전을 설치하라고 나온다.
yarn add node-sass@4.14.1

이때 터미널에서 오류가 나는 경우에는 보통 node버전때문에 일어난다.

npm문서에서 node-sass버전 4.14+를 위해서는 Node 14버전이 필요하다고 명시해놓았다.
보통 node를 설치할때 최신버전이 좋은 거겠지?하면서 최신버전을 깔곤하는데, 단순히 그렇게 생각하면 안된다는걸 배웠다… 기술스택이 다양하면 다양할수록 기술간 의존성에 대해 공부해야한다는걸 느꼈다.

암튼 이 버전에 맞게 Node 14를 깔아주어야하는데, n이라는 플러그인을 사용하면 node의 버전을 쉽게 관리할 수 있다.
(참고한 블로그)[https://brownbears.tistory.com/423]

변수

변수를 선언하기 위해선 $를 붙이면 된다.

$red: #fa5252;

mixin

mixin은 재사용되는 스타일 블록을 함수처럼 사용할 수 있다.

@minin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

sass-loader 설정 커스터마이징하기

보통 변수나 mixin은 다른파일에 따로 분리하고, import해와서 사용한다.
이때, 경로가 깊어지면 적용할 수 있는게 sass-loader의 설정을 커스터마이징해야한다.

yarn eject로 세부설정을 빼낼 수 있는데, 현재 폴더의 상태가 git push된 이후, 최신상태여야한다.

이후 config/webpack.config.js 에서 sass-loader부분을 이렇게 수정한다.

  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    }).concat({
      loader: require.resolve("sass-loader"),
      options: {
      sassOptions: {
      includePaths: [paths.appSrc + "/styles"],
      sourceMap: isEnvProduction && shouldUseSourceMap,
      },

이제 styles 경로를 기준으로 scss파일을 불러올 수 있다.

매번 변수파일을 추가하는게 귀찮다면,

.concat({
      loader: require.resolve("sass-loader"),
      options: {
      additionalData: `@import 'utils';`,
      sassOptions: {
      includePaths: [paths.appSrc + "/styles"],
      sourceMap: isEnvProduction && shouldUseSourceMap,
      },

요로코롬 모든 scss파일에서 utils.scss를 자동으로 불러오게 할 수 있다!!

라이브러리 불러오기

sass의 장점 중 하나는 라이브러리를 쉽게 불러온다라는 것이다.

예를들어 yarn add react-icons를 하면 리액트에서 다양한 아이콘을 사용할 수 있는 라이브러리를 가져온다.
각각의 아이콘들이 SVG형태로 이루어져 리액트 컴포넌트처럼 쉽게 사용할 수 있다.

yarn을 통해 설치한 라이브러리를 사용하는 가장 기본적인 방법은 상대경로를 통해 node_modules로 들어가는 방법이 있는데,

이를 생략하는 방법이 ~를 이용하는 방법이다.

물결문자를 이용하면 node_modules에서 자동으로 디렉터리를 탐지한다.