create-react-app 업데이트에 따른 변화/오탈자? about learning-react HOT 12 CLOSED

        {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }).concat({
              loader: require.resolve('sass-loader'),
              options: {
                includePaths: [paths.appSrc + '/styles'],
                data: `@import 'utils';`
              }
            })
          },

최신 CRA 에서는 위와 같은 형태로 고칠 수 있긴 합니다. 관련해서 velog 에 조만간 포스트 작성 할 예정입니다 :)
참고로 data 옵션은 모든 scss 파일에 해당 라인을 추가시켜주는 기능입니다.

그리고 방금 --scripts-version=1.1.5 으로 했을때 이전 버전으로 잘 설치되는것을 잘 확인했습니다.
다시한번 해보시거나, 혹은 npx create-react-app 으로도 한번 해보시겠어요?

from learning-react.

https://github.com/velopert/learning-react#%EC%9D%BD%EC%96%B4%EC%A3%BC%EC%84%B8%EC%9A%94

우선 책을 전체적으로 업데이트 할 때 까지는 이전 버전을 사용하시는게 좋을 것 같습니다.
176p 오탈자 반영하고 이슈 닫을게요~

from learning-react.

추가적으로 scss-loader 말고 sass-loader 를 찾아보시면 있을거에요

      {
        test: sassRegex,
        exclude: sassModuleRegex,
        use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
      },

최근 CRA 에서는 'sass-loader' 자리에 객체 형태로 옵션을 그대로 넣으면 될지는.. 모르겠지만 조만간 해보고 회신드리겠습니다.

from learning-react.

아 감사합니다! 한번 해볼게용!

from learning-react.

{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader', { includePaths: paths.styles }),
},
이렇게 해봤는데 안되네요 ㅠㅠ 이게 아닌감...

from learning-react.

@velopert
이것때메 며칠째 진도를 못나가는데요 ㅠㅠ

주신 링크에 있는대로 다시 프로젝트 만들어서 eject 하고 yarn start 하면
yarn start
yarn run v1.10.1
$ node scripts/start.js
internal/modules/cjs/loader.js:583
throw err;
^

Error: Cannot find module 'babel-loader'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.resolve (internal/modules/cjs/helpers.js:30:19)
at Object. (/mnt/d/styling-react/config/webpack.config.dev.js:145:29)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/mnt/d/styling-react/scripts/start.js:31:16)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

이런 에러가 납니다..

babel-loader 에러인것 같은데 흐흐흑.. 어찌해야 하나요

아무것도 안건들고 yarn eject만 하고 yarn start하면 걸립니다 ㅠㅠ

from learning-react.

$ yarn eject
$ yarn install

eject 후 yarn install 을 한번 더 입력하여 모듈들을 다시 제대로 설치하세요.
CRA 쪽에도 문의 해봤는데 yarn 쪽 버그라고하네요...!

from learning-react.

윽... 그런거였군요 ㅠㅠㅠ 감사합니당

from learning-react.

$ create-react-app sample-project --scripts-version=1.1.5
위의 커맨드로 프로젝트를 생성해도 yarn eject해보니 웹팩 설정은 최신 CRA를 따라가는 것 같네요. 때문에 책에 나온 것처럼 객체형식으로 옵션을 변경할 수가 없습니다. 최신 CRA webpack 설정 변경 방법을 봐야겠네요 ㅠㅠ. 해결하면 저도 코드 올리겠습니다~!

from learning-react.

@velopert 앗 벨로퍼트님이 알아봐주셨네요. 네, 다시 확인해보겠습니다 :-)

from learning-react.

@velopert npx를 붙이니 잘 되네요^^;;

from learning-react.

책과 이 @import 'utils'; 를 붙이는 방식으로 하려면

options: {
  includePaths: [paths.appSrc + '/styles'],
-  data: `@import 'utils';`
}

와 같이 해도 되는군요. 좋은 정보 감사합니다.

from learning-react.