Create-react-app+Antd+Less配置方案

React官方脚手架工具Create-react-app 用于快速创建React应用,但依旧有局限性,我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。

方案一:react-scripts

1. 安装less、less-loader依赖包

    a. yarn安装

yarn add less less-loader

    b. npm安装

npm install --save less less-loader

2. 修改配置文件

config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改) 

a. 查找 :exclude

原本的 exclude: [/\.js$/, /\.html$/, /\.json$/], 

修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

b. 查找:test: /.css$/

原本的 test: /\.css$/, 

修改为 test: /\.(css|less)$/,

c. 在这个test的下面找到use,添加loader

方案二:React-app-rewired

一个对 create-react-app 进行自定义配置的社区解决方案。 

1. 安装react-app-rewired

npm install –save-dev react-app-rewired

2. 修改package.json启动项

3. 添加配置文件

在项目根目录创建文件:config-overrides.js,用于修改默认配置。

4. 使用babel-plugin-import

实现Antd按需加载,修改config-overrides.js

npm install --save-dev babel-plugin-import

5. 使用react-app-rewire-less配置Less

npm install –save-dev react-app-rewire-less

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容