create-react-app脚手架创建react项目，暴露webpack配置文件，如何引入less支持+antd按需加载+自定义主题

使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。

第一步 暴露webpack配置文件

使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可

yarn eject

运行之后，我们发现多了一个config文件夹，这样就可以修改 webpack 相关配置了。

第二步 添加less 在项目根目录 使用 npm 或者 yarn 来安装antd less 和 less-loader

1. yarn add babel-plugin-import
2. yarn add antd
3. yarn add less less-loader

 

第三步 修改package.json：添加antd库的样式

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

第四步 复制代码修改配置环境（webpack.config.js） 定义全局变量

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

第五步 复制代码配置less-loader

//在大概466行会看到如下代码
      {
                test: sassModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: true,
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
                'sass-loader'
               ),
            },
 
 
 //在此代码后添加如下代码
 
 {
               test: lessRegex,
               exclude: lessModuleRegex,
               use: getStyleLoaders(
                 {
                   importLoaders: 2
                 },
                 'less-loader'
               ),
            },

             {
               test: lessModuleRegex,
               use: getStyleLoaders(
                 {
                   importLoaders: 2,
                   modules: true,
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
                 'less-loader'
               ),
            },

 

第六步 复制代码定义全局样式

//注释掉大概114行

// if (preProcessor) {
    //   loaders.push({
    //     loader: require.resolve(preProcessor),
    //     options: {
    //       sourceMap: isEnvProduction && shouldUseSourceMap,
    //     },
    //   });
    // }
    // return loaders;

//替换为如下
    if (preProcessor) {
      let loader = require.resolve(preProcessor)
      if (preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: { //自定义主题
              'primary-color': ' #1890ff ',
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }
    return loaders;

 

第七步 复制代码修改package.json

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

大概执行完以上代码之后，及支持less，同时也支持antd按需加载。

其实个人觉得没必要暴露webpack，当然我个人不了解webpack，我不是专业做前端的，因为公司用到这个，所以学习一下，

我觉得antd里使用文件的方式支持按需加载，更加简单方便。直接按照高级配置一步一步做就好了。也很方便。webpack太麻烦了，

哈哈，回头也要补充一下webpack方面的知识。