用customize-cra react-app-rewired配置less css module

1. 安装

npm i less less-loader -D
npm i customize-cra-less-loader -D复制

2.添加配置项

//config-overrides.js
const { override } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");
 
module.exports = {
  webpack: override(
    addLessLoader({
      // strictMath: true,
      // noIeCompat: true,
      // loader: "css-loader",
      // options: {
      //   modules: {
      //     localIdentName: "[name]__[local]___[hash:base64:5]",
      //   },
      //   sourceMap: true
      // },
      // css loader options 
      cssLoaderOptions: {
        modules: {
          localIdentName: '[file]',
        }, 
      },
      // less loader options
      lessLoaderOptions: {
        lessOptions: {
          strictMath: true,
        }
      }
    }),
  )
}复制

// 需要下载customize-cra-less-loader，别从customize-cra直接导出，会报以下错误
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

3.启动

npm start 复制