import styles from './index.module.less' undefined?

先上结论：

github.com/webpack-con… css-loader从V7开始都是用命名导出了

//如果不想解构可以使用
import * as styles from './index.module.less'

背景

昨天很晚新建一个React项目，配置webpack时，发现less模块化引入不生效 配置超简单

module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      }
    ],
  },

然后问了很多AI发现都不能解决（可能是我姿势不对），所以就去翻了翻css-loader的issues，大神们还是靠谱的。