记录：create-react-app + ant design 构建 react项目更改主题

create-react-app构建的react是将webpack也进行打包，构建的一个集成的简便的react项目。

首先，用create-react-app构建一个简单的react项目

create-react-app my-project

cd my-project

npm start

然后，打开项目代码，发现并没有webpack.config等相关文件，但是create-react-app为我们提供了一个脚本命令：eject，只要npm run eject就可以将项目解压成平常我们见到的webpack项目结构了。

下面是npm run eject后的项目结构,已经有了webpack.config.dev.js

npm run eject

然后，添加ant design

npm install antd -S
npm add antd

为了使antd按需加载，所以引入babel-plugin-import

npm install babel-plugin-import -D

然后在webpack.confog.dev.js 中找到// Process JS with Babel

更改配置为

// Process JS with Babel.
  {
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {
                            "plugins": [
                                ["import", {"libraryName": "antd", "libraryDirectory":"es", "style": true}] // `style: true` 会加载 less 文件
                            ],
                            // This is a feature of `babel-loader` for webpack (not Babel itself).
                            // It enables caching results in ./node_modules/.cache/babel-loader/
                            // directory for faster rebuilds.
                            cacheDirectory: true,
                        },
   },

然后在App.js中添加代码，测试antd是否能够正常使用

npm install
npm start

运行结果，成功引入。

下面就是更改主题了，首先安装less和less-loader

npm install -g less

//less-loader
npm install --save-dev less-loader less

成功之后package.json

然后，配置webpack.config.dev.js

rule下面这个位置，添加options，modifyVars为具体主题修改代码，详见antd官方文档 - 定制主题

{
            test: /\.less$/,
            use: [{
              loader: 'style-loader',
              }, {
                loader: 'css-loader', // translates CSS into CommonJS
              }, {
                loader: 'less-loader', // compiles Less to CSS
                options: {
                  modifyVars: {
                    'primary-color': 'red',
                    'link-color': '#1DA57A',
                    'border-radius-base': '2px',
                  },
                  javascriptEnabled: true,
              }
            }],
},

最后，重新安装依赖，启动本地服务，此时主题以及发生了改变（如图），主色调已经变成了红色。

npm install

npm start