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

原创 野人  2021-10-18 19:43  阅读 19 次

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

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

方法一

第一步:yarn add @craco/craco -D 或者 npm 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 或者 npm 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,写的很不错,我就不重复浪费资源了。

本文地址:http://www.yerenwz.com/4867.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论