[React] scss 커스터마이징

책 '리액트를 다루는 기술' 230p부터 설명해주는

sass-loader 설정을 커스터마이징 해주는 부분에서,

yarn eject를 하여

config라는 디렉터리가 생겼다.

 

해당 디렉터리 안에 webpack.config.js 에서

sassRegex라는 키워드를 찾아 약간을 수정해주었다.

 

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders({
                importLoaders: 3,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }).concat({
                loader: require.resolve("sass-loader"),
                options: {
                  sassOptions: {
                    includePaths: [paths.appSrc + "/style"],
                  },
                  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,
            },

이렇게 concat을 이용하여 커스터마이징된 sass-loader설정으로 바꾸어주었다.

 

app.js가 있는 위치외 다른 디렉터리 안에 scss를 저장하게되면

/style/utils.scss 처럼 import를 해줘야하는 것을 includePaths를 이용하여 

@import 'utils.scss';

만 추가해주어도, 가능하도록 만들어주었다.

 

여기서, 계속 @import 해주는것도 귀찮기 때문에,

책에서 webpack.configs.js 파일에 sourceMap 뒤에

prependData를 추가해주었다.

이 코드를 치면 utils.scss를 적용해주는 곳에 import를 안해주어도 실행이 잘 될 수 있었다.

 

하지만, 이 코드를 친 후, 서버를 재시작하였더니 에러가 떠서 찾아보았다.

이제 리액트에서는 prependData가 아닌,

additionalData로 변경된 것이다!!

 

즉,

     additionalData: `@import 'utils';`

를 추가해주고, 서버를 재시작했더니 잘 실행이 된것을 볼 수 있다.