React 中导入的AntD 自动按需引入
这里主要使用的是react-app-rewired
和customize-cra
因为react-app-rewired
中2.0
之后的版本将injectBabelPlugin
方法删除了,因此需要借助于customize-cra
babel-plugin-import
插件就是用来按需导入相应的css
文件
- 安装
npm i antd
npm i customize-cra react-app-rewired babel-plugin-import -D
- 配置 react-app-rewired文档说明
- 首先先在
package.json
中配置 把react-scripts
替换成为react-app-rewired
替换成为"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
- 在项目根目录和
package.json
同级下面新建一个config-overrides.js
的文件const { override, fixBabelImports } = require('customize-cra') module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }) )
- 直接使用
import { Input } from 'antd'
的导入语法就行
使用scss
直接安装cnpm i node-sass -D
在项目中引入import './index.scss'
import './index.scss'