<div id="readability-page-1" class="page"><div>
 <a href="/m/category/FRONTEND">FRONTEND</a><h3>ant design 3.x theme customize</h3>
 </div><cite>나를찾는아이</cite>
 2023. 1. 2. 18:27
 <div>
 <a href="https://3x.ant.design/docs/react/use-with-create-react-app" target="_blank" rel="noopener">https://3x.ant.design/docs/react/use-with-create-react-app</a>
<figure id="og_1672627549126" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Use in create-react-app - Ant Design" data-og-description="The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it. Then we go inside antd-demo and start it. Open the browser at http://lo" data-og-host="3x.ant.design" data-og-source-url="https://3x.ant.design/docs/react/use-with-create-react-app" data-og-url="https://3x.ant.design/docs/react/use-with-create-react-app" data-og-image="https://scrap.kakaocdn.net/dn/sFLkg/hyQ86s8fWH/48PZ5xsJlXusXBCcomvCv0/img.png?width=200&amp;height=200&amp;face=0_0_200_200"><a href="https://3x.ant.design/docs/react/use-with-create-react-app" target="_blank" rel="noopener" data-source-url="https://3x.ant.design/docs/react/use-with-create-react-app">

<div>
Use in create-react-app - Ant Design
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it. Then we go inside antd-demo and start it. Open the browser at http://lo
3x.ant.design
</div>
</a><img src="https://scrap.kakaocdn.net/dn/sFLkg/hyQ86s8fWH/48PZ5xsJlXusXBCcomvCv0/img.png?width=200&amp;height=200&amp;face=0_0_200_200"></figure>


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

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


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

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

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

<pre id="code_1672650241265" data-ke-language="javascript" data-ke-type="codeblock"><code>@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</code></pre>

이러한 변수들이 있습니다

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

primary-color 를 바꾸려고 했는데

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


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

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-01-02 오후 12.50.55.png" data-origin-width="2544" data-origin-height="832">
 
 <img src="https://blog.kakaocdn.net/dn/bOCGqY/btrVexBhFMI/fMuGBe8JFRbFQhxdvrkP8k/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-01-02 오후 12.50.55.png" data-origin-width="2544" data-origin-height="832">
 
 
</figure>
primary-color를 변경하면 위의 그림처럼 form control들의 색이 모두 변경됩니다


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

<pre id="code_1672627599247" data-ke-language="javascript" data-ke-type="codeblock"><code>$ yarn add react-app-rewired customize-cra</code></pre>

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

위의 패키지를 설치하고 package.json의 스크립트를 변경해주세요
<pre id="code_1672627646184" data-ke-language="javascript" data-ke-type="codeblock"><code>/* package.json */
"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
}</code></pre>

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

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

<pre id="code_1672627687375" data-ke-language="javascript" data-ke-type="codeblock"><code>$ yarn add babel-plugin-import</code></pre>
less가 프로젝트에 설치되어있지 않다면

less와 less-loader를 설치해주세요
<pre id="code_1672627720399" data-ke-language="javascript" data-ke-type="codeblock"><code>$ yarn add less less-loader</code></pre>

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

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

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


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

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

<pre id="code_1672627774253" data-ke-language="javascript" data-ke-type="codeblock"><code>// 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' },
 },
 }),
);</code></pre>

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

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


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

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

<pre id="code_1672651472799" data-ke-language="javascript" data-ke-type="codeblock"><code>@import '~antd/dist/antd.css';</code></pre>


이상 끝!



 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

https://3x.ant.design/docs/react/use-with-create-react-app
 
 
아직 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';
 
 
이상 끝!

ant design 3.x theme customize

댓글