前端技术

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

配置方法

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

  1. 安装 less-loader less babel-plugin-import 
    1
    yarn add less-loader less babel-plugin-import --dev
  2. 在webpack.config.js文件中增加配置,复制sass的配置修改即可 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    //配置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文件 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    "babel": {
        "presets": [
          "react-app"
        ],
        // 增加 plugins 数组
        "plugins": [
          [
            "import",{"libraryName":"antd","style":"css"}
          ]
        ]
    },

依赖版本

1
2
3
4
5
"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
1
2
3
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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安装一下