react+customize-cra使用less+less-loader时，可能遇到的问题及解决办法

目录

1、先附上各依赖版本和config-overrides.js配置代码，按这个版本和配置就没问题

2、问题（注意：问题顺序没有先后之分哦）

2.1、TypeError: Cannot read property 'tap' of undefined

2.2、No module factory available for dependency type: CssDependency

2.3、ValidationError: CSS Loader Invalid Options

2.3.1、方法一：安装 customize-cra-less-loader 自定义 cssLoaderOptions，很简单，但没有解决我的问题，此处贴出来可以先尝试

2.3.2、方法二：弃用addLessLoader和adjustStyleLoaders，改用 addWebpackModuleRule

2.4、import styles from "index.module.less"，styles是undefined，提示Cannot read properties of undefined (reading 'container')

2.5、postcss-pxtorem不生效

1、先附上各依赖版本和config-overrides.js配置代码，按这个版本和配置就没问题

"devDependencies": {
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.0.0",
    "less": "^4.1.2",
    "less-loader": "^11.0.0",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "postcss-pxtorem": "^6.0.0",
    "style-loader": "^3.3.1",
    "video.js": "^8.6.1",
    "webpack": "^5.0.0"
  }

const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addWebpackModuleRule,
} = require("customize-cra");
const path = require("path");

module.exports = override(
  (config) => ({
    ...config,
  }),
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  }),
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
  }),
  addWebpackModuleRule({
    test: [/\.css$/],
    use: ["style-loader", "css-loader", "postcss-loader"],
  }),
  addWebpackModuleRule({
    test: [/\.less$/],
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          // url?, import?, modules?, sourceMap?, importLoaders?, esModule?, exportType?
          modules: {
            localIdentName: "[local]--[hash:base64:5]",
          },
        },
      },
      {
        loader: "less-loader",
        options: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
      "postcss-loader",
    ],
  })
);

2、问题（注意：问题顺序没有先后之分哦）

2.1、TypeError: Cannot read property 'tap' of undefined

这个问题需要webpack和html-webpack-plugin的版本保持一致，此处主动安装为较新版本，问题解决。

"html-webpack-plugin": "^5.0.0" 和 "webpack": "^5.0.0"

2.2、No module factory available for dependency type: CssDependency

这个报错是css-loader版本太低，升级css-loader就可以了

2.3、ValidationError: CSS Loader Invalid Options

2.3.1、方法一：安装 customize-cra-less-loader 自定义 cssLoaderOptions，很简单，但没有解决我的问题，此处贴出来可以先尝试

链接如下GitHub - xyy94813/customize-cra-less-loader: Add less loader to any create-react-app using customize-cra

const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");

module.exports = override(
  addLessLoader({
    cssLoaderOptions: {
      sourceMap: true,
      modules: {
        localIdentName: "[hash:base64:8]",
      },
    },
    lessLoaderOptions: {
      lessOptions: {
        strictMath: true,
      },
    },
  })
);

2.3.2、方法二：弃用addLessLoader和adjustStyleLoaders，改用 addWebpackModuleRule

const { override, addWebpackModuleRule } = require("customize-cra");

module.exports = override(
  addWebpackModuleRule({
    test: [/\.css$/],
    use: ["style-loader", "css-loader", "postcss-loader"],
  }),
  addWebpackModuleRule({
    test: [/\.less$/],
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          // url?, import?, modules?, sourceMap?, importLoaders?, esModule?, exportType?
          modules: {
            localIdentName: "[local]--[hash:base64:5]",
          },
        },
      },
      {
        loader: "less-loader",
        options: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
      "postcss-loader",
    ],
  })
);

2.4、import styles from "index.module.less"，styles是undefined，提示Cannot read properties of undefined (reading 'container')

可能是style-loader/css-loader/less-loader版本不匹配的原因。这边解决办法是将style-loader和css-loader版本改成和react-scripts写的版本一样就好了，此处可以从package-lock.json查具体版本。（注意：如果你的项目没有安装style-loader和css-loader，也可以在package-lock.json找到react-scripts对应的版本，按版本安装就好了）

2.5、postcss-pxtorem不生效

我这边解决的方法是安装postcss和postcss-loader就好了，postcss.config.js配置如图

/*
 * 关于 postcss-pxtorem 的说明:
 *   用来自动将 px 单位值转换为 rem 值，开发中可以直接使用 px 单位。
 */
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 16,
      propList: ["*"],
    },
  },
};