책 가지고 계신 분은 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이 떴고 그 이유를 모르겠습니다. 정말 책대로 했는데 어이가 없네요.
혹시 왜 그런지 아시는 분 있으시면 알려주시면 감사하겠습니다.