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

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

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

• 참고: next-plugin-antd-less

(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";

변경 완료!

야호!!