自定义antd主题

采用create-react-app创建的项目结合了typescript

一、安装babel-plugin-import 、less和less-loader

npm i babel-plugin-import less less-loader

二、找到并打开webpack.config.js或者webpack.config.dev.js文件

如果没有需要先npm run eject暴露配置文件。

三、在文件中找到

image.png

在下面的plugins中添加代码

 ["import", {"libraryName": "antd", "libraryDirectory":"es", "style": true}],

如图：

image.png

四、找到exclude添加/\.less$/

image.png

五、找到rules中的use[]中加入

modifyVars中即可配置自定义颜色

{
          test: /\.less$/,
          //include: paths.appSrc,
          use: [{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "less-loader", // compiles Less to CSS
            options: {
              sourceMap: true,
              modifyVars: {
                'primary-color': '#001529',
                'link-color': '#c9d6de',
                'border-radius-base': '5px',
              },
              javascriptEnabled: true,
            }
          }]
        },

六、注意src目录下的App.css中的@import '~antd/dist/antd.css';需要去掉。