由于 create-react-app 脚手架中并没有配置关于 less 文件的解析,所以我们需要自己进行配置。需要安装的插件 less, less-loader。以下是配置less的完整过程
1、安装less ,less-loader
npm install less less-loader --save
2、配置less
(1) 在命令行输入npm run eject命令,将脚手架隐藏的配置文件config->webpack.config.js显示出来.并且配置
(2)在webpack.config.js文件中的52行增加less的解析规则:
const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;
(3)在webpack.config.js文件中的490行插入:
{
test: lessRegex,
exclude: lessModuleRegex,
use:getStyleLoaders(
{
importLoaders:2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects:true,
},
{
test: lessModuleRegex,
use:getStyleLoaders(
{
importLoaders:2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true,
getLocalIdent:getCSSModuleLocalIdent,
},
'less-loader'
)
}
3、重启react项目,即可编写less。