create-react-app 创建React 默认不支持less 且webpack配置默认不可见 需要手动配置
第一步:打开下载webpack React项目配置文件

注意:必须是全新的项目或者已经提交的项目
运行完成后项目根目录会增加 config 和 scripts目录
npm run eject

第二步: 安装less解析依赖

npm i less less-loader --save-dev

第三步: 修改配置文件 打开config目录下webpack.config.js文件 搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

第四步:搜索getStyleLoaders方法 增加参数 preProcessorOptions 及修改方法体

// 修改前
const getStyleLoaders = (cssOptions, preProcessor) {
  if (preProcessor) {
     loaders.push(
         loader: require.resolve(preProcessor),
         options: {
           sourceMap: true,
  return loaders;  
// 修改后
const getStyleLoaders = (cssOptions, preProcessor, preProcessorOptions = {
    sourceMap: true,
  if (preProcessor) {
     loaders.push(
         loader: require.resolve(preProcessor),
         options: preProcessorOptions

第四步:搜索test: sassModuleRegex

test: sassModuleRegex, use: getStyleLoaders( importLoaders:
3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { mode: 'local', getLocalIdent: getCSSModuleLocalIdent, 'sass-loader' // 增加的内容 test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment 'less-loader', sourceMap: true, lessOptions: { javascriptEnabled: true // less javascriptEnabled参数 sideEffects: true, test: lessModuleRegex, use: getStyleLoaders( importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, 'less-loader', sourceMap: true, lessOptions: { javascriptEnabled: true // less javascriptEnabled参数
注意:less-loader的版本不同,配置不同。
V6.0.0之前
options: {
javascriptEnabled: true
V6.0.0之后
options: {
lessOptions: {
javascriptEnabled: true