1단계 - 필요한 패키지 설치

npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd-theme-webpack-plugin  --save-dev

2단계 - vars.less 파일 생성

3단계 - config-overrides.js 파일 만들기

일부 옵션 설명:

• 
  stylesDir: 2단계에서 생성한 vars.less 파일의 상위 디렉터리 경로
  
• 
  varFile: 2단계에서 생성한 vars.less 파일의 경로
  
• 
  themeVariables: 여기에 나열된 값은 5단계에서 수정할 수 있는 유일한 적은 변수입니다. Here(기본적으로 antd에서 적게 사용됨)는 추가할 수 있는 변수 목록입니다.

참고: less-loader@5를 사용하는 경우 확인하십시오this

4단계 - package.json 수정

package.json의 script 부분에서 react-app-rewired 대신 react-scripts를 사용합니다.

참고: 꺼내기 스크립트 호출을 뒤집지 마십시오.

이제 앱을 시작할 수 있습니다.

npm start

5단계 - 자바스크립트에서 더 적은 변수 수정

앱이 오류 없이 시작되었으면 마지막 단계로 이동해도 됩니다.

적은 변수를 수정하는 방법에 대한 샘플 코드는 다음과 같습니다.

//less variables that will be used here must be declared in themeVariables on config-overrides.js
window.less
    .modifyVars({
        "@primary-color": "#52c41a"
     })
    .then(() => {
        //do other stuff here
     })
     .catch(error => {
         console.error(error);
     });

이제 가져오기를 제거할 수 있습니다antd.css

실시간 미리보기: https://antd-change-theme-color.netlify.app/

코드: https://github.com/christianandrei/antd-change-theme-color

즐거운 코딩하세요!

곧: Antd Darkmode 튜토리얼!

계속 지켜봐 주세요!