React 项目暴露webpack配置文件按需加载antd+less+自定义主题

配置less

cnpm i less less-loader

打开 config 文件夹，修改 webpack.config.js

搜索 style files regexes ，找到后添加两行代码

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

修改 getStyleLoaders 函数，添加代码

// common function to get style loaders
  const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),

搜索 cssRegex ，在 css 配置下添加 less 配置

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 1,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 1,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

第一种方法按需加载antd react-app-rewired

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

cnpm i react-app-rewired customize-cra

packjson.js代码：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  },

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': 'red' },
    }),
);

第二种方法使用 babel-plugin-import按需加载antd

npm run eject

然后 安装babel-plugin-import

npm -s install babel-plugin-import

在webpack里面找到babel-loader，因为babel-plugin-import是通过babel的添加一下代码：

                  [
                    require.resolve('babel-plugin-import'),// 导入 import 插件
                    {
                       libraryName: 'antd',   //暴露antd
                       style: 'css'
                    }
                 ],

主题配置

如果要更改antd主题颜色的话，下面这个style属性值就不能是"css"了。必须改成true,原因是因为值是css时按需加载时加载的就是antd编译后之后的css文件，要更改主题颜色是要更改less变量的，而true标识直接加载antd的less文件

注意，坑来了！！当你设为true时，你会发编译失败，页面中antd组件也会没有样式了，命令行抛出如下异常：

这是因为你还没配置less-loader的配置项，在之前我复制修改的那个地方只是引入使用了less-loader,并没有添加配置项，导致他就会出现这个异常，那么如何配置这个主题。

第一步：将下面的红色框代码去掉

第二步：在下面这个地方，去掉红色框代码

修改为

if (preProcessor) {
      let loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      }
      if (preProcessor === 'less-loader') {
        loader.options.modifyVars = {
          'primary-color': '#000000',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        }
        loader.options.javascriptEnabled = true
      }
      loaders.push(loader);
    }

原文链接：https://blog.csdn.net/huangjianfeng21/article/details/94202823