Official react scaffolding add less configuration

Loaded two packages

npm install --save less less-loader

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

In about 58 rows sass following validation rules, configuration, less rule

/\.(scss|sass)$/ sassRegex = const;
const = sassModuleRegex /\.module\.(scss|sass)$/;
// check the configuration of the rule less
const = lessRegex /\.less$/;
const lessModuleRegex = /\.module\.less$/;

In about 560 rows sass following configuration, together with the following code

 

{
  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'
  ),
},

 

Under the final restart server: npm Start