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

React 공부를 책을 통해 하고 있던 도중 (출처: 벨로퍼트 리액트를 다루는 기술) utils.scss 파일을 불러올 때 현재 수정하고 있는 scss 파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles 디렉토리 기준 절대 경로를 사용하여 불러올 수 있게 하기 위해 webpack.config.js에

커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 하니 options has an unknown property 'includePaths'. These properties are valid 라는 오류가 발생했다. 이게 무슨 에러인고 하니 .. 현재 내가 내려받은 sass-loader의 버전이 호환 불가능한 버전이기 때문에 발생하는 오류였다.

그리하여, sass-loader를 여기를 참고하여 최신 버전으로 업그레이드한 후 설정한 뒤 다시 켜보니 이젠 includePaths가 아닌, prependData에 대한 오류가 발생했다. 이를 구글링해봐도 딱히 나오지 않았던지라(1년전 글이 최신이었음) 리액트 컴파일 에러 메시지를 보니, 사용할 수 있는 property에 대한 설명이 나와 있었고, 그 중 additionalData를 입력하니 해결되었다.

결론

  {
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }).concat({
      loader: require.resolve("sass-loader"),
      options: {
        additionalData: `@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,
  },

additionalData를 넣어주면 해결된다.
(단, sass-loader의 경우에는 3/23 기준 최신 버전인 11.x 버전을 이용할 경우 Vue의 2.6x 버전과 호환이 되지 않아 TypeError: this.getOptions is not a function라는 오류가 발생하므로, npm uninstall --save-dev sass-loader로 삭제해준 뒤 npm install --save-dev sass-loader@10.1.0의 버전을 설치하여 다운그레이드를 시켜줘야 한다.)

3줄요약

1. react-app 최신버전 및 sass-loader 10대 버전으로 업그레이드 및 다운그레이드 한 뒤
2. prependData 대신에 additionalData를 넣어주면
3. sass-loader 커스터마이징 적용 오류가 해결된다.