react+antd 项目使用.less以及引入babel-plugin-import实现按需加载

使用react-create-app创建项目

一：使用less 使less文件生效

1.暴露配置文件

yarn eject  

(这里遇到问题 直接去百度吧 百度的方法都可以解决)

下载less less-loader 要注意版本问题 我的less是2.7.3 less-loader是5.0.0

yarn add less@2.7.3 less-loader@5.0.0

2.打开webpack.config.js文件

3.添加配置代码
添加less的部分

大概在60行左右
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

大概在500行左右
            //less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

不更改主题可以先不写options后面的代码
一般这个时候就可以使用less文件引入样式了

二、babel-plugin-import按需加载

1.首先下载插件

yarn add babel-plugin-import 

2.下载antd

yarn add antd

3.在package.json文件中配置

    "babel": {
        "presets": [
            "react-app"
        ],
        "plugins": [
            [
                "import",
                {
                    "libraryName": "antd",
                    "style": true
                }
            ]
        ]
    }

注意style 后面的true antd官方文档说的是如果使用babel-plugin-import实现按需加载时无效 要把style的css改成true

配置完这一步 就可以实现按需加载 不用再引入antd的样式文件了


页面就有样式了 如果要更改主题的颜色 上面的内容我已经提到了 更多的细节修改可以看官方文档。