'리액트를 다루는 기술' 책 따라하는 중 오류가 발생했습니다. 도와주세요.

React
1

책 가지고 계신 분은 p.228부터 봐주세요.

<문제상황>
a.scss라는 파일과 같은 단계에 b라는 폴더를 만들고, 그 안에 c.scss라는 파일을 만들고 c.scss에 a.scss에서 사용할 함수와 변수를 잘라내기 해서 a.scss에서 c.scss를 불러오는 방식을 적용하는 중이었습니다.
불러올 때
@import './b/c';
를 사용하여 불러오면 되지만 글쓴이는 이를 번거롭게 생각하여
@import 'c';
로 바꾸려고 했습니다.
그래서
yarn eject
명령어를 사용하려고 했고, 그러기 위해 그 전에 커밋을 한번 해줬습니다.
$ git add .
$ git commit -m'Commit before yarn eject
그 다음에
$ yarn eject .... ? Are you sure you want to eject? This action is permanent. (y/n) y
를 사용하였고 프로젝트 디렉터리에 config라는 디렉터리가 생성되었습니다.
그 안에 있는 webpack.config.js를 열어서 control F로 'sassRegex’를 찾았습니다. 두 번째 sassRegex로 이동해서

{ test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, } 'sass-loader' ),
에서 ‘sass-loader’ 부분을 변경하여

{ test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap }).concat({ loader: require.resolve("sass-loader"), options: { includePaths: [paths.appSrc + "/styles"], sourceMap: isEnvProduction && shouldUseSourceMap,} }),
로 바꾸었고 서버를 껐다가 켰습니다.
그러자 Fail to compile이 떴고 그 이유를 모르겠습니다. 정말 책대로 했는데 어이가 없네요.

%EC%BA%A1%EC%B2%98
캡처.PNG1380×299 21 KB

혹시 왜 그런지 아시는 분 있으시면 알려주시면 감사하겠습니다.

2

오류 사진을 보시면

includePaths 가 unkown property 라고 되어있습니다.

해결방법은

.concat({ 
    loader: require.resolve("sass-loader"), 
    options: { 
        sassOptions : {
            includePaths: [paths.appSrc + "/styles"],
            sourceMap: isEnvProduction && shouldUseSourceMap,
        }
    } 
})

이렇게 해주시면 됩니다.

sassOptions 로 한번 묶어주셔야합니다.

3

해당 코드 적용했습니다. 그런데도 똑같은 컴파일 오류가 발생합니다.

4

오류 내용은 바뀌지 않았나요?? 해당 내용을 올려주세요!

우선 제가 적용한 코드입니다.

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
    }, ).concat({
            loader: require.resolve('sass-loader'),
            options: {
                    sassOptions: {
                            includePaths: [paths.appSrc + '/styles'],
                            sourceMap: isEnvProduction && shouldUseSourceMap,
                    }
            }
    }),
    sideEffects: true,
}
5

해당 책 깃허브에 개정 내용대로 해보셨나요? 최근에 내용이 바뀌었더라구요

6

오류 내용은 위의 사진에 'includePaths’가 'data’로 바뀐거 말고는 그대로에요.
지금은 해결할 수 없을 거같아서 그 부분은 스킵했습니다.

7

이상하게도 제 책은 개정판입니다.

8

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

저는 sassOptions로 한번 감싸니까 되네요!