react官方脚手架添加less配置

装两个包

npm install --save less less-loader

在node-modules/react-scripts/config/webpack.config.js中

在大概58行sass校验规则的下面，配置less规则

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 配置less的校验规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在大概560行sass配置的下面，加上如下代码

{
  test: lessRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'less-loader'
  ),
},

最后重启下服务器：npm start