CRA에서 scss 변수를 전역적으로 사용하는 방법

CRA에서는 eject 후 webpack 설정을 해주지 않는 이상 기본적으로 scss의 변수를 전역적으로 사용할 수 없다.

사용할 수 있는 방법은 변수가 담겨있는 scss 파일을 사용하고자하는 scss 파일마다 일일이 import 해주는 것 뿐이다. (번거롭게시리...)

이러한 문제를 craco 라이브러리를 사용해 해결할 수 있다.

 

carco 라이브러리

https://www.npmjs.com/package/@craco/craco

 

1. 라이브러리 설치

npm install @craco/craco

or

yarn add @craco/craco

 

2. package.json 파일의 "scripts" 부분 변경

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test"
},

// 위 내용을 아래 내용으로 변경

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
},

 

3. 프로젝트 root 경로에 craco.config.js 파일 생성 및 내용 추가

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `
        // 본인의 프로젝트에 맞게 경로 변경하여 추가하고자 하는 파일 추가
          @import "src/assets/scss/_variables.scss";
          @import "src/assets/scss/_mixins.scss";
        `,
      },
    },
  },
};

 

4. 위 작업 후 프로젝트를 실행해보면 변수가 선언된 scss 파일을 변수를 사용하고자 하는 scss 파일마다 일일이 import하지 않아도 사용이 가능한 것을 확인할 수 있다.

 

참고: https://medium.com/@zaeemkhaliq/how-to-globally-access-sass-scss-variables-in-react-app-563212667ae