리액트를 다루는 기술중 컴포넌트 스타일링 챕터 sass-loader 오류 해결법

문제점

{
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
  }).concat({
    loader: require.resolve('sass-loader'),
    options: {
      includePaths: [paths.appSrc + '/styles'],
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }
  }),
}

이런식으로 오류가 뜬다

해결법

use: getStyleLoaders({
  importLoaders: 2,
  sourceMap: isEnvProduction
  ? shouldUseSourceMap
  : isEnvDevelopment,
}).concat({
  loader: require.resolve('sass-loader'),
  options: {
    sassOptions: {
      includePaths: [paths.appSrc + '/styles'],
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }
  }
}),

자동 import 추가

options 속성안에 sassOptions 라는 속성을 추가한다
sass 코드에 데이터를 추가할 때도 오류가 발생했다
책에서는

data: `@import 'utils';`

따라하면 오류가 난다 해결할려면

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

이렇게하면 scss 상단에 import를 직접 지정해주지 않아도 자동으로 지정해준다.

참고한 사이트

1. https://webpack.js.org/loaders/sass-loader/#sassoptions