리액트 sass-loader 설정 커스터마이징 오류 'options has an unknown property 'includePaths'. These properties are valid' 해결 방법

필자는 '리액트를 다루는 기술' 도서를 기반으로 리액트를 공부하고 있다. 이 포스트는 그 중 '컴포넌트 스타일링' 챕터에서 발생한 오류에 대해 다루고 있다.

필자가 올해 이 도서를 구입하긴 했어도, 리액트 버전 업데이트가 워낙 빠르므로 이미 옛날 내용이 되어버렸다😂. IT란... 아무튼 필자가 참고한 내용은 이 도서의 저자의 블로그에 나와있으니 궁금하면 다음 페이지를 참고해보자. https://velog.io/@velopert/react-component-styling

그런데 문제는 무엇이냐!! 위 페이지 또한 옛날 방식이 되어버린 것이다😭.
이 sass-loader 설정 때문에 너무 헤멨다.

각설하고, 구체적으로 sass-loader 설정 커스터마이징에 대해 알아보자.
제목에 달아놨지만, 커스터마이징을 위하여 config/webpack.config.js를 조작하면 'options has an unknown property 'includePaths'. These properties are valid' 에러가 발생한다. 이러한 에러 말고도 다른 에러 메시지가 뜰 수 있다. 필자도 그랬으니까.

결론부터 말하자면, 필자가 발견한 유일한 해결방법은 react-app을 최신 버전으로 다시 깔아서 해야한다는 것이다(...)

npx create-react-app front-app 이런 식으로 최신 버전의 react-app을 깔아주어야 한다. 꼭 npx를 사용할 필요는 없다. 자세한 내용은 아래 포스트들을 참고하길 바란다.
1. npx란 무엇인가? : https://geonlee.tistory.com/32
2. create-react-app으로 생성한 폴더에 아무것도 안 생길 때 : https://devsoyoung.github.io/posts/cra-reinstall/

그리고, 아주 대부분의 포스트를 보면

            {
              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
                }
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true
            },

위와 같은 방식으로 /webpack.config.js를 조작하라고 한다.

틀렸다!!!!😬

현재 버전에서는 틀렸다.
options안에 또 다른 옵션들을 설정해 주어야 하기 때문에, 다짜고짜 sass 옵션을 써버리면 안되고, sassOptions 안에 정의를 해주어야 한다.

다음은 1월 17일자로 '39ghwjd' 님이 댓글로 알려주신 방법이다. 1월 19일자로 실행해보니 아주 실행이 잘 되어서 이 방법을 공유한다.

결론은 다음과 같다.

            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap
              }).concat({
                loader: require.resolve('sass-loader'),
                options: {
                  prependData:`@import 'utils';`,
                  sassOptions: {
                    includePaths: [paths.appSrc + '/styles'],
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  }
                }
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

요약하자면, sass-loader 커스터마이징 시 나타나는 오류의 대부분의 해결법은 다음과 같다.
1. react-app 버전 최신화
2. sassRegex 부분의 적절한 변경
: 특히, options 안의 prependData와 sassOptions를 사용했음을 유의하자.

나와 같은 오류로 헤메이는 사람이 없길 바람과 동시에, 39ghwjd님께 감사의 말씀을 전하며 이만 포스팅을 마친다.