react 项目 添加 less支持 和 antd 按需加载

配置方法

在项目中yarn eject暴露出webpack文件进行改造

1. 安装 less-loader less babel-plugin-import

    yarn add less-loader less babel-plugin-import --dev
   

2. 在webpack.config.js文件中增加配置,复制sass的配置修改即可

    //配置less的变量
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
   
    {
      test: lessRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
   

3. 修改package.json文件

    "babel": {
        "presets": [
          "react-app"
        ],
        // 增加 plugins 数组
        "plugins": [
          [
            "import",{"libraryName":"antd","style":"css"}
          ]
        ]
    },
   

依赖版本

"babel-plugin-import": "^1.13.0",
"less": "^3.10.3",
"less-loader": "^5.0.0"
"antd": "^3.25.3",
"react": "^16.12.0",

最终效果

错误处理

• 执行yarn eject之后报错 Cannot find module '@babel/plugin-transform-react-jsx'

删除 node_modules 文件夹 重新 yarn install

• 配置less-load之后报错 bezierEasingMixin

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^

在webpack.config.js文件中有一个getStyleLoaders方法.修改后的方法如下

  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // 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'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            javascriptEnabled: true // 增加这句
          },
        }
      );
    }
    return loaders;
  };

• 添加less-loader后还会报缺少less模块. yarn安装一下