nextjs 如何配置 antd4的主题色？

Question

环境：
"antd": "4.24.12",
"next": "13.4.10",

希望配置定制 antd的主题色

Answer 1

先安装：

npm install --save antd
npm install --save-dev less less-loader@5 next-less

./styles/antd.less：

@import "~antd/dist/antd.less";
@primary-color: #1da57a; // 你想要修改主题色

next.config.js：

const withLess = require('@zeit/next-less')

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1DA57A', // 修改主题色
     
    },
  },
})

还有_app.js 文件导入antd.less 文件：

import '../styles/antd.less