리액트에서 Scss 사용하는 법

이전에 SCSS 문법을 정리했었다.
https://velog.io/@namyeji/Sass-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95

리액트에서 Scss를 사용하려고 하니 방법이 좀 다르다.

1. SCSS를 프로젝트에 설치하기

프로젝트 디렉토리에서 다음의 명령어를 실행하여 node-sass를 설치한다.

npm install node-sass --save
또는
yarn add node-sass

2. SCSS 파일 작성하기

리액트 컴포넌트와 함께 사용할 .scss 파일을 생성한다.
예를 들면, App.scss라는 이름으로 파일을 생성할 수 있다.

// App.scss
$primary-color: #3498db;

.app {
  background-color: $primary-color;
  padding: 20px;
}

3. 리액트 컴포넌트에서 SCSS 파일 임포트하기

.scss 파일을 생성했다면 해당 파일을 리액트 컴포넌트에서 임포트하여 스타일을 적용할 수 있다.

// App.js
import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="app">
      Hello, React with SCSS!
    </div>
  );
}

export default App;

4. 프로젝트 실행하기

이제 모든 것이 설정되었으므로, npm start 또는 yarn start 명령어를 통해 리액트 앱을 실행하면 SCSS 스타일이 적용된 것을 확인할 수 있다.

html에 연결해서 사용할 때는 scss가 여러개라면 다른 scss를 수정 할 때마다 명령어를 입력해야 css가 적용되었는데, 리액트는 설치하고 연결만 해주면 되니 더 간편한 것 같다.