[React] "리액트를 다루는 기술" 9장 컴포넌트 스타일링 / React Sass-loader 설정 커스터마이징 오류 이슈

'리액트를 다루는 기술' 9장 컴포넌트 스타일링 학습 중

 

utils.scss 파일을 불러올 때 현재 생성된 utils.scss 파일의 위치와 상관없이 불러오고, 매번 불러오는 상황이 번거로울 때 utils.scss 파일을 자동으로 불러와, @import 를 사용하지 않아도 정상적으로 작동하기 위한 방법을 학습하였습니다.

 

yarn eject를 통해 생성된 config 폴더 내 존재하는 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 최종적으로 '리액트를 다루는 기술'에 적힌 코드를 입력하니, 

            {
              test: sassRegex,
              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,
                  prependData: `@import 'utils';`
                }
              }),

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:

   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

 

라는 에러가 발생하였습니다. prependData property가 허용되지 않는 다는 것인데, 이를 해결하기 위해 구글링을 하였고, 

https://steadily-worked.tistory.com/405

[React] React Sass-loader 설정 커스터마이징 오류 'options has an unknown property 'prependData'. These properties are

블로그를 참고하였습니다.

 

결론적으로 prependData는 지원하지 않는 property이며, 이를 additionalData로 수정할 경우 에러가 발생하지 않고 정상적으로 작동합니다.