解决React脚手架create-react-app中不能使用less问题
React脚手架create-react-app不支持less,因此需要配置webpack的webpack.config.js文件。
在使用React脚手架的时候,可能发现是没有webpack.config.js文件的。运行npm run eject,会多出两个目录config和scripts,此时可以在config目录下看到配置文件webpack.config.js。
下载less less-loader
使用 npm 或 yarn 下载均可:
配置 webpack.config.js文件
第一步
React脚手架是支持sass的,因此可以像配置sass一样配置less就可以。在webpack.config.js文件中找到下面这几行代码,定义less变量。
第二步
在module属性下的rules中添加less的loader处理,找到sass的配置,对照配置一份。
修改的地方有三处,如下图我选中的红色选框:
分别替换成 lessRegex, lessModuleRegex, ‘less-loader‘ 并保存 如下图:
这样就可以在组件中直接使用less了。