React 环境 webpack less 配置 及 javascriptEnabled 解决方法

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
}
}