벨로퍼트님 글들을 보며 따라가다 보면 CSS Module과 Sass를 함께 자주 사용하신다고 생각됩니다.
일단 책에서 일정 관리 프로그램은 같이 사용해요.. 따라서 Webpack 설정을 해줘야 하는데요.

얼마 전 create-react-app이 V2 로 업데이트 되면서 설정이 바뀌었습니다. ( 참고https://velog.io/@velopert/create-react-app-v2 )

이에 따라 Sass와 CSS module 설정도 바뀌었는데요 벨로퍼트님이 이것에 대해 글을 써주셨습니다.( https://velog.io/@velopert/react-component-styling )

그런데 여기서 벨로퍼트님 글을 따라가다가 문제가 발생하는데요.

sass-loader 설정을 커스터마이징 하여 @import 'utils.scss' 처럼 간단히 import 하는 방법에서 문제가 발생했습니다. (이런걸 글로벌 패스라 하는게 맞나요?)

벨로퍼트님의 컴포넌트 스타일링 글을 따라하며 또 벨로퍼트님이 올려주신 글의 프로젝트를 진행하면 저 import가 안되는것을 알 수 있는데요.

그것에 대해 열심히 고민하다가 해결한 듯 합니다.

벨로퍼트님 글에서는

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

이 부분을 커스터마이징 하라고 하셨지만 CSS Module을 같이 사용한다면 여기만 해서는 안됩니다.

webpack.config.dev 파일에서 저 부분을 설정 하시고 밑으로 조금 더 내려가시면

있ㅇㄹ걸.PNG
이런 부분이 있을 겁니다.

이 부분은 (파일명).module.scss 설정 부분인 것 같은데요. 이 부분도 벨로퍼트님의 글처럼 아래와 같이 설정해 주세요.

Ekfkds.PNG
그리고 서버를 재시작 하시면 해결이 될겁니다.

혹시 저처럼 너무나 초보자라 문제가 생기시는 분들에게 도움이 되었으면 합니다.

틀린 부분 지적해주세요!