react 项目配置 less 及 less 报错解决方案

构建命令npx create-react-app my-app

暴露项目配置 npm run eject

安装 less yarn add less less-loader -D

强烈推荐使用 yarn 安装 👍

进入 config / webpack.config.js

const lessRegex = /\.(less|less)$/;
const lessModuleRegex = /\.module\.(less|less)$/;

配置规则

  {
    test: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    }),
  },
  // 添加这段
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      "less-loader"
    ),
    sideEffects: true,
  },
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      "less-loader"
    ),
  },
  // 添加这段
  {
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      "sass-loader"
    ),
    sideEffects: true,
  },

如果遇到报错

• 原因： less-loader安装的版本过高
• 解决方案：
  • yarn remove less-loader
  • yarn add less-loader@6.0.0

配置完成之后，记得重启项目。