React 中导入的AntD 自动按需引入 引入 scss

React 中导入的AntD 自动按需引入

这里主要使用的是react-app-rewired和customize-cra
因为react-app-rewired中2.0之后的版本将injectBabelPlugin方法删除了，因此需要借助于customize-cra
babel-plugin-import插件就是用来按需导入相应的css文件

1. 安装npm i antd
npm i customize-cra react-app-rewired babel-plugin-import -D
2. 配置 react-app-rewired文档说明
3. 首先先在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"
   }
   

4. 在项目根目录和package.json同级下面新建一个 config-overrides.js的文件

   const { override, fixBabelImports } = require('customize-cra')
   module.exports = override(
       fixBabelImports('import', {
           libraryName: 'antd',
           libraryDirectory: 'es',
           style: 'css'
       })
   )
   

5. 直接使用import { Input } from 'antd'的导入语法就行

使用scss直接安装cnpm i node-sass -D

在项目中引入import './index.scss'

import './index.scss'