[ Webpack ] CRA(create-react-app) Webpack sass-loader 기본 루트 설정

CRA(create-react-app) Webpack sass-loader 기본 루트 설정

CRA (create-react-app)으로 생성된 React 프로젝트는 다양한 컴포넌트 스타일링 방식이 있다.

여러 방법이 존재하지만 기본 스타일루트를 지정해주어서 전역변수처럼 활용하는 스타일링 방법에대해 알아본다.

src디렉토리 안에 styles라는 디렉토리를 생성하고 utils.scss파일을 만들어서,

자주 사용 될 수도 있는 Sass 변수 및 믹스인을 따로 분리하여 전역변수와 같이 사용 할 때 

utils.scss에 담긴 변수 및 믹스인을 사용하려면, 위 코드처럼 상대경로를 쭉 입력해 주어야 하는 번거로움이 있다.

이부분은 필수 적인 작업은 아니지만, 해두면 좋을 수 있는 작업이다.

Webpack에서 Sass를 처리하는 sass-loader의 설정을 변경하여 위 경로문제 해결이 가능하다.

그러나 CRA(create-react-app)로 생성한 프로젝트는 프로젝트 구조의 복잡도를 낮추기위해 세부 설정이 전부 숨어있다.

그걸 꺼내서 커스터마이징을 하기 위해서는 아래와같은 작업을 해주면 된다.

프로젝트 루트에서 yarn eject를 입력해보자.

$ yarn eject

yarn run v1.12.0

warning ../package.json: No license field

$ react-scripts eject

? Are you sure you want to eject? This action is permanent. (y/N) y

eject 진행중에 한번 꺼내면 다시 넣을 수 없다는 식에 경고문구가 뜨지만 별 상관없다 Y를 선택해주자.

eject가 완료 되면 프로젝트 루트에 config라는 디렉 토리가 생성되고 아래에는 아래와같은 파일들이 들어있다.

여기서 webpack.config.js 파일을 열고 sassRegex를 찾아보면

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
  'sass-loader'
  ),
  sideEffects: true,
},

이런 블록이 보일텐데 이부분의 use: 부분을 아래와 같이 변경한다.

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

이런 식으로 작성 후, 서버를 재시작하면

상대경로를 입력할 필요 없이 styles 디렉토리 기준 절대경로로 불러올 수 있다.

@import 'utils.scss';