目录

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: ["*"],},},
};