[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
블로그를 참고하였습니다.
결론적으로 prependData는 지원하지 않는 property이며, 이를 additionalData로 수정할 경우 에러가 발생하지 않고 정상적으로 작동합니다.