【React Less】react配置less文件编译

自从入门开始，开发一直用的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文件引入即可，如下图。