[email protected] 配置 less 与 antd

create-react-app@1.x

在1.x版本中配置less见 1.x版本配置less

create-react-app@2.x

升级2.x的版本后，有两种配置less的方式

1. react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。 react-app-rewire-less 来帮助加载 less 样式
2. 直接修改webpack配置文件

经测试上述第一种方式在create-react-app@2.x中出现不兼容问题，推荐使用craco

这里以第二种方式为例
其实在2.x版本中默认内置了(scss/sass),这里仅作为配置示例

2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js

配置less

npm run eject

弹出webpack配置文件

npm i less less-loader -D

安装 less 以及 less-loader

在webpack中进行配置，与1.x相比较，2.x对css loader这一块做了提取，抽出了一个方法，如下

// common function to get style loaders
// 第一个参数代表配置项
// 第二个参数代表使用的loader
// 返回的loader列表就是匹配的样式文件需要加载的loader
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        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,
            }),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    
    // 以下是需要关注的重点，当有loader传入的时候做处理
    // 可以将 preProcessor 与 less-loader 做对比，判断使用了哪一个loader
    if (preProcessor) {
      loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
    }
    return loaders;
  };

定义less文件匹配规则

// style files regexes 样式匹配规则
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 新加less匹配项
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/

			// 在sass的配置下新增less配置
			{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), // 注意第二个参数
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader' // 注意第二个参数
              ),
            },

在 App.js中导入less文件一切正常

配置antd组件库

安装并配置按需导入

npm i antd -S
npm i babel-plugin-import -D

在package.json中或者.babelrc中配置按需导入的组件库规则

    "plugins": [
      ["import", {
        "libraryName": "antd",
        "style": "css"
      }]
    ]

目前为止在App.js中按需导入antd组件一切正常

注意：如果需要修改主题默认配置的话(例如颜色)导入less文件这里应设置为true

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

这里主要还是落下了less-loader的配置

// 接上文相同代码
if (preProcessor) {
      if (preProcessor === 'less-loader') { // 为less-loader添加配置项，启动javascript
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            javascriptEnabled: true // 解决上文报错
          },
        });
      } else {
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
      }
    }

那么我要配置的主题颜色呢，别急见下文

	// 接上文代码
	if (preProcessor === "less-loader") {
    	loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modifyVars: { // 修稿主题颜色
              'primary-color': '#000000',
            },
            javascriptEnabled: true
          },
        });

到此配置完成，可以撸代码了