ant design 3.x theme customize

https://3x.ant.design/docs/react/use-with-create-react-app

Use in create-react-app - Ant Design

 

 

아직 antd 3.x 을 사용하는 프로젝트가 있습니다

 

이미 5.x이 출시되었는데 말이죠 ㅠ

 

 

antd는 메인 테마 컬러로 블루컬러가 사용되고 있습니다

 

하지만 antd는 몇가지 설정들을 변수로 관리하여 테마를 커스터마이징할수 있는 방법을 제공하고 있습니다

 

antd는 less를 사용하고 있는데 less의 modifyvars를 이용한 방법을 제공하고 있습니다

 

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

 

이러한 변수들이 있습니다

 

이 포스팅 맨위의 링크에는 CRA를 통해 만든 react app의 antd 테마를 커스터마이징 하는 방법이 설명되어있습니다

 

primary-color 를 바꾸려고 했는데

 

문서가 오래되어 업데이트가 안된 부분들이 있어 해당 내용을 업데이트한 버전을 정리하였습니다

 

 

추가적인 변수들도 같은 방법으로 설정하시면 됩니다

 

primary-color를 변경하면 위의 그림처럼 form control들의 색이 모두 변경됩니다

 

 

CRA를 사용하는 경우 먼저 아래의 두개 패키지를 설치해야합니다

 

$ yarn add react-app-rewired customize-cra

 

CRA를 사용할때 eject 없이 webpack 설정을 하기 위함입니다

 

위의 패키지를 설치하고 package.json의 스크립트를 변경해주세요

/* package.json */
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
}

 

react-scripts를 react-app-rewired로 변경하면됩니다

 

그리고 babel-plugin-import 패키지를 설치합니다

 

$ yarn add babel-plugin-import

less가 프로젝트에 설치되어있지 않다면

 

less와 less-loader를 설치해주세요

$ yarn add less less-loader

 

webpack 버전이 4.x를 사용하고 있다면

 

less-loader는 7.3.0을 사용해야합니다

 

그 이상의 버전은 webpack5에 의존성이 있습니다

 

 

그리고 프로젝트의 root 경로에 config-overrides.js 파일을 생성하여 다음과 같이 작성합니다

 

config-overrides.js를 통해 웹팩 설정을 override합니다

 

// config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      math: 'always',
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#7950f2' },
    },
  }),
);

 

이 파일의 내용이 공식문서의 내용과 다릅니다

 

less-loader 버전을 7.x을 사용하는 경우 위와 같은 설정이 필요합니다

 

 

위의 설정을 통해서 antd의 style이 import 되고 있기 때문에

 

기존 설정에 antd.css를 import한 부분이 있다면 제거해주시면 됩니다

 

@import '~antd/dist/antd.css';

 

 

이상 끝!