Next.js에서 Ant Design primary color 변경하기

antd 컬러를 우리 프로젝트 컬러로 바꿔주기

2021-11-09에 씀

아래는 Next.js 프로젝트 기본 세팅이 되어있는 상태에서 진행합니다.

1. 필요한 라이브러리 설치

  1. npm i antd next-plugin-antd-less
  2. npm i -D babel-plugin-import

(2021. 11. 26. 추가) less, @zeit/next-less 등의 less 관련 라이브러리가 있다면 삭제해 주어야 한다. package.json 파일 의존성 안에 less 관련 라이브러리는 next-plugin-antd-less만 있어야 한다. 만약에 관련 라이브러리를 설치한 적이 있다면, 해당 라이브러리를 삭제하고, yarn install --force를 실행한다. (npm install --force로는 안 됐음)

2. 웹팩 설정

next.config.js 파일에서,

1/** @type {import('next').NextConfig} */
2// eslint-disable-next-line @typescript-eslint/no-var-requires
3const withAntdLess = require("next-plugin-antd-less");
4
5const nextConfig = {
6 // 원하는 Next 설정 추가
7};
8
9 module.exports = withAntdLess({
10 lessVarsFilePath: "./src/styles/variables.less",
11 ...nextConfig,
12 webpack(config) {
13 return config;
14 },
15});

3. 바벨 설정

.babelrc 파일에서

1{
2 "presets": [
3 "next/babel"
4 ],
5 "plugins": [
6 [
7 "import",
8 {
9 "libraryName": "antd",
10 "style": true
11 }
12 ]
13 ]
14}

4. variables.less 파일 생성

1 @import '~antd/lib/style/themes/default.less';
2 @import '~antd/dist/antd.less'; // Import Ant Design styles
3
4@primary-color: #fc1150;

이 밖에 바꿀 수 있는 값은 node_modules/antd/lib/style/themes/default.less에서 확인

1@primary-color: @blue-6;
2@info-color: @primary-color;
3@success-color: @green-6;
4@processing-color: @blue-6;
5@error-color: @red-5;
6@highlight-color: @red-5;
7@warning-color: @gold-6;
8@normal-color: #d9d9d9;
9@white: #fff;
10@black: #000;
11@body-background: #fff;
12@component-background: #fff;
13@popover-background: @component-background;
14@popover-customize-border-color: @border-color-split;
15@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
16 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
17 'Noto Color Emoji';
18@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
19@text-color: fade(@black, 85%);
20@text-color-secondary: fade(@black, 45%);
21@text-color-inverse: @white;
22@icon-color: inherit;
23@icon-color-hover: fade(@black, 75%);

5. _app.js에 스타일시트 import

1...
2 import "../styles/variables.less";

변경 완료!

야호!!

프로필 사진

조예진

이전 포스트
파이썬 알고리즘 문제 풀이 치트시트
다음 포스트
Storybook에서 Ant Design 사용하기