벨로퍼트님, 리액트 책 잘 보고 있습니다.
(CRA 등의 버전 이슈만 빼면 이보다 좋은 교보재는 없을거같습니다.ㅜㅜ)

현재 scss (sass) @import 경로 설정 부분에서 매우 헤매이고 있습니다.

• CRA 2 버전대이고

• IDE 로는 WebStorm을 사용하고 있습니다. (이건 큰 문제는 되지 않는 것 같긴합니다.)

• 에 올리신 글도 읽고 테스트 모듈을 따로 만들어서 실행도 해보고 있습니다만..

• scss에서 @import 'utils'에서 자꾸 문제가 생깁니다. (.env 로 컴포넌트의 절대경로 설정하는 부분은 잘 됩니다.)
  아래의 내용에 대해 블로그에 글을 남길지, 이곳에 이슈로 남길지 모호해서 일단 마크다운 적용이 확실한 이슈쪽에 글을 남깁니다. (블로그 내용으로 테스트하였으나, 문제 상황은 책의 utils.scss 설정에서도 발생하는 문제이기 때문에...)

1) 테스트 환경 (블로그에 기재하셨던 SassComponent.scss)

• 책의 내용과 블로그에 기재하신 부분이 서로 버전이 맞지 않아서 블로그 기준으로 작성하였습니다.
• 따라서 paths.js에 별도의 수정을 가하지는 않았습니다.
• PC에 따라 (OSX High Sierra 사용중입니다.) 발생하는 문제인지 잘 모르겠습니다.
• 다만 webpack.config.js에서 블로그에 설명하신대로

 use: getStyleLoaders({
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap
                }).concat({
                    loader: require.resolve('sass-loader'),
                    options: {
                        includePaths: [paths.appSrc + '/styles'],
                        sourceMap: isEnvProduction && shouldUseSourceMap,
                        data: `@import 'https://github.com/utils';`
                    }
                }), 

위와 같이 수정하였습니다. 이 경우 yarn build 시에 아래와 같이 빌드 실패가 됩니다.

./src/SassComponent.scss

^
      It's not clear which file to import for '@import "https://github.com/utils"'.
Candidates:
  utils.scss
  utils.css
Please delete or rename all but one of these files.

• utils 라는 이름을 가진 모듈 중에서 scss 확장자나 css 둘 중에 어느 것을 자동으로 @import 할지 몰라서 생기는 웹팩 상의 문제 같습니다.

• 이 부분은 data: @import 'https://github.com/utils';를 data: @import 'https://github.com/utils.scss';로 고치면 해결되는 것 같습니다.

• data 속성을 제거하고, ./src/SassComponent.scss 에서 @import 'https://github.com/utils'를 입력 후 yarn build시에도 같은 문제가 발생합니다. @import 'https://github.com/utils.scss' 로 명시해야 잘 조회가 되는 것 같습니다.

Q.

• 위 같은 문제가 왜 생기는 것일까요?
• IDE에서 .scss가 .css 및 .css.map 파일을 하위 디렉토리로 갖고 있는 것 같은데 굳이 @import 시에 확장자 명시여부가 중요하게 작용하는지 모르겠네요.

2) IDE의 cannot resolve file 'utils.scss'

• @import 'https://github.com/utils.scss' 를 해도 IDE 상에서 utils.scss 디렉토리 추적이 불가능한 메시지가 떠 있습니다. (상대경로 접근시 디렉토리 추적은 잘 됩니다.)
• .env로 설정한 컴포넌트의 절대경로는 잘 추적이 되는 것으로 보아 sass 의 문제일까요?
• IDE 상에서 경로 추적이 안되는 경우 간혹가다가 import 실패의 경우로 이어지는 경우가 있어서 혹시나 싶어 문의드립니다.