react项目使用less样式,配置less
create-react-app脚手架创建的项目有sass配置项,使用的时候只需要装包即可,下面是less使用的方法
由于 create-react-app 脚手架中并没有配置关于 less 文件的解析,所以我们需要自己进行配置。需要安装的插件 less, less-loader。
1、安装less ,less-loader
npm install less less-loader --save
2、配置less
(1)在webpack4.x以上版本 在命令行输入npm run eject命令,将脚手架隐藏的配置文件config->webpack.config.js显示出来.并且配置
(2)在webpack.config.js文件中找到 css和sass配置项 的 在52行增加less的解析正则规则:
const lessRegex =/\.less$/; const lessModuleRegex =/\.module\.less$/;
(3)在webpack.config.js文件中的css和sass配置项 490行插入:
{ test: lessRegex, exclude: lessModuleRegex, use:getStyleLoaders( { importLoaders:2, moudles: true, //模块化 sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects:true, }, { test: lessModuleRegex, use:getStyleLoaders( { importLoaders:2, sourceMap: isEnvProduction && shouldUseSourceMap, getLocalIdent:getCSSModuleLocalIdent, }, 'less-loader' ) }