P.230 sass-loader 설정 커스터 마이징

[mattt0204]

webpack의 버전 업그레이드로 커스터 마이징 설정 부분이 아래와 같이 변경되었습니다. { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap }).concat({ loader: require.resolve('sass-loader'), options: { sassOptions: { includePaths: [paths.appSrc + '/styles'] }, // src/styles sourceMap: isEnvProduction && shouldUseSourceMap, prependData: @import 'utils'; } }), sideEffects: true },

[ghost]

책 대로 하다가 안되서 이 코드 복붙했는데도 안됩니다.

[mattt0204]

webpack document 문서를 참고하였습니다. 매우 자주 바뀌는 것 같습니다. https://webpack.js.org/configuration/ 참고하세요

[velopert]

https://github.com/velopert/learning-react/blob/master/corrections.md#922-pg-230-231-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8

[kooljay82]

** 설명이 빠져서 코멘트 수정합니다. 예제 코드와는 다른 하위 버전입니다. **

에러 로그를 살펴보면, options 안에 프로퍼티가 유효하지 않다고 나오며, 선택할 수 있는 property가 출력됩니다. options 안에 sassOptions를 추가하여 아래와 같이 설정 파일을 수정하면 정상적으로 노출되니 수정해보세요. 그 다음 설정 부분인 data 프로퍼티는 sassOptions와 같은 레벨이어야 하며, additionalData로 명칭이 수정되었네요.

options: {
  sassOptions: {
    includePaths: [paths.appSrc + "/styles"],
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
  additionalData: `@import 'utils';`,
},