自从入门开始,开发一直用的webstorm,less文件的编译一直用编辑器的File watcher。如今用react+antd做项目,了解了react+antd+less的搭配,下边小叙一下,希望能帮到不熟悉的同学。
首先,安装以下四个依赖:
less、less-loader、react-app-rewired、customize-cra
(管理工具是yarn,就是yarn add less等,如果是npm,就是npm install less等)
然后,修改 package.json 的脚本,将 scripts 对象修改成如下:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
第三,在项目根目录下创建一个 config-overrides.js 的文件,内容如下:
const {
override,
addLessLoader,
} = require('customize-cra');
module.exports = override(
// less 的配置
addLessLoader(),
);
最后,重启项目,less文件引入即可,如下图。