cra에서 eject으로 웹팩 sass-loader 설정 커스터마이징하기

만약 프로젝트에 디렉터리를 많이 만들어서 구조가 깊어졌다면(예:
src/components/somefeature/ThisComponent.scss) 해당 파일에서는 다음과 같이 상위 폴더로 한참 거슬러 올라가야 한다는 단점이 있습니다.

@import '../../../styles/utils'; -> @import 'utils';
이 문제점은 웹팩에서 Sass를 처리하는 sass-loader의 설정을 커스터마이징하여 해결할 수 있습니다.

먼저 sass를 사용할려면 node-sass를 설치해줘야한다.

  yarn add node-sass
	or
  npm i node-sass
	then
  sass-loader 설치

cra로 만든 프로젝트는 프로젝트 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져있기 때문에 커스터마이징을 할려면 yarn eject or npm run eject 을 실행한다

eject을 해주기 전에 git tracking에 따라 해당 명령이 취소될 수 있기때문에 미리 git커밋까지 해준 후 eject을 해주자.

webpack.config.js - sassRegex 찾기

	// 커스텀 마이징 전
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    ‘sass-loader‘ // 이 부분을 지우고 커스터마이징
  ),
  sideEffects: true,
},

	// 커스텀 마이징 후
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap
}).concat({
    loader: require.resolve(‘sass-loader‘),
    options: {
      includePaths: [paths.appSrc + ‘/scss폴더‘],
      sourceMap: isEnvProduction && shouldUseSourceMap,}
}),
sideEffects: true
},

getStyleLoaders().concat()으로 커스텀 마이징해준다.

@import '../../../styles/utils'; 상대경로를 @import 'utils'; 절대경로처럼 쓸수있다

Reference

리액트를 다루는 기술