装两个包
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
原文:https://www.cnblogs.com/shengjunyong/p/12050829.html