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

Sass를 사용할 때 반드시 해야 하는 작업은 아니지만 해 두면 유용하다.

예를 들어 방금 SassComponent에서 utils를 불러올 때 @import './styles/utils'; 형태로 불러왔는데, 만약 프로젝트에 디렉터리를 많이 만들어서 구조가 깊어졌다면?

src/components/somefeature/ThisComponent.scss 다음과 같이 상위 폴더로 한참 거슬러 올라가야 한다는 단점이 있는데, 웹팩에서 Sass를 처리하는 sass-loader의 설정을 커스터마이징하여 해결할 수 있다.

@import '../../../styles/utils';

create-react-app으로 만든 프로젝트는 프로젝트 구조의 복잡도를 낮추기 위해 세부 설정이 모두 숨겨져 있다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내줘야 한다.

create-react-app에서는 기본적으로 Git 설정이 되어 있는데, yarn eject는 아직 Git에 커밋되지 않은 변화가 있다면 진행되지 않으므로 먼저 커밋해 준다.

$ git add .
$ git commit -m'Commit before yarn eject'

$ yarn eject
yarn run v1.12.0
warning ../package.json: No license field
$ react-scripts eject
? Are you sure you want to eject? This action is permanent. (y/N) y 

그러면 프로젝트 디렉터리에 config라는 디렉터리가 생성되는데, 그안에 들어 있는 webpack.config.js를 열어보자.

그 파일에서 "sassRegex"라는 키워드를 찾아보면, 다음과 같은 코드가 나타날 것이다.

// webpack.config.js - sassRegex 찾기
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  sideEffects: true,
},

여기서 use:에 있는 'sass-loader' 부분은 지우고, 뒷부분에 concat을 통해 커스터마이징된 sass-loader 설정을 넣어준다.

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap
}).concat({
    loader: require.resolve('sass-loader'),
    options: {
      includePaths: [paths.appSrc + '/styles'],
      sourceMap: isEnvProduction && shouldUseSourceMap,}
}),
sideEffects: true
},

설정 파일을 저장한 후, 서버를 껐다가 재시작한다. 이제 utils.scss 파일을 불러올 때 현재 수정하고 있는 scss 파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles 디렉터리 기준 절대 경로를 사용하여 불러올 수 있다.

SassComponent.scss 파일에서 import 구문을 다음과 같이 수정해보자! 그리고 똑같이 적용되는지 확인도 해보자.

@import 'utils.scss';

이제부터 utils.scss를 사용하는 컴포넌트가 있다면 임포트해주면 된다. 하지만 새 파일을 생성할 때마다 utils.scss를 매번 이렇게 포함시키는 게 귀찮을 땐, sass-loader의 data 옵션을 설정하면 된다. data 옵션을 설정하면 Sass 파일을 불러올 때마다 코드의 맨 윗부분에 특정 코드를 포함시켜 준다.

webpack.config.jsx를 열어서 조금 전 수정한 sass-loader의 옵션에 있는 data 필드를 다음과 같이 설정한다.

// webpack.config.js

{
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap
  }).concat({
    loader: require.resolve('sass-loader'),
    options: {
      includePaths: [paths.appSrc + '/styles'],
      sourceMap: isEnvProduction && shouldUseSourceMap,
      data: `@import 'utils';`
    }
  }),
  sideEffects: true
},

이렇게 작성하고 개발 서버를 재시작하면 모든 scss 파일에서 utils.scss를 자동으로 불러와서 Sass에서 맨 윗줄에 있는 import 구문을 지워도 정상적으로 작동하게 된다.