使用create-react-app创建的项目，怎么设置才能支持less文件？

如果你有用create-react-app这个脚手架来搭建项目的话，没有用过的话，可以看我之前关于《使用Create React App脚手架快速创建TypeScript+React+Ant Design开发环境》的文章。

想必肯定知道默认是不支持less文件，仅支持css文件，这样其实对于开发是很不友好的，那么接下来就让我给大家讲下如何设置之后，才能支持对less文件的处理。

方法一：

第一步：yarn add @craco/craco -D 或者 pm i @craco/craco -D

第二步：安装好craco包后，修改package.json里的scripts 属性，具体修改如下；

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

第三步：yarn add craco-less -D 或者 pm i craco-less -D

第四步：在项目根目录创建一个craco.config.js，用于修改默认webpack打包的配置，具体内容如下；

const CracoLessPlugin = require('craco-less');
module.exports = {
    plugins: [{ plugin: CracoLessPlugin }],
};

方法二：直接通过暴露出webpack的配置文件出来，目前已有的项目也是这样做，但是不推荐，一来直接修改源代码的方式不好维护，二来暴露基本配置后，整个的项目结构就变得不怎么清晰了，挺乱得，所以就不推荐了，也就不给大家讲了。

这四步，都完成了话，就赶快去试试写less的香了。

对了，关于使用less来实现自定义主题的话，大家可以直接上antd-design的官方看下，https://ant.design/docs/react/use-with-create-react-app-cn，写的很不错，我就不重复浪费资源了。