本文应用react^17.0.1、next.js^10.0.0、babel-plugin-import^1.13.3；且只实用于next.js10版本
在应用antd时，按需引入是优化文件打包体积必不可少的一个步骤，在antd文档中间接导入模块：
import { Button } from "antd";这样便可按需引入模块，但该按需引入只是引入了js模块，咱们的款式文件还须要在_app.js中再引入：
//app.jsimport "antd/dist/antd.css";且这样的引入并不是按需引入css款式，而是一次把所有组件款式全副引入，那么在next.js10中该如何按需引入antd的css组件款式呢？
这里咱们用了antd官网提倡的按需引入包 babel-plugin-import
创立babel.config.js文件
在我的项目根目录下咱们新建一个babel.config.js文件用来配置babel配置；这里必须创立js格式文件，不能创立.babelrc文件；写入配置：
//babel.config.jsmodule.exports = { presets: ["next/babel"], plugins: [ [ "import", { libraryName: "antd", libraryDirectory: "lib", style: function (name) { // console.log(name); return `${name}/style/index.css`; }, }, ], [ "import", { libraryName: "@ant-design/icons", libraryDirectory: "lib/icons", camel2DashComponentName: false, }, "@ant-design/icons", ], ],};咱们来解释下上述配置
presets是应用next.js自带的babel配置
plugins则是咱们新增的babel配置
咱们新增了两个，别离是给antd的款式引入与其icon引入应用的；css的按需引入重点在
[ "import", { libraryName: "antd", libraryDirectory: "lib", style: function (name) { return `${name}/style/index.css`; }, },],依据模块名引入对应的css，至于为什么style要用办法返回path，是因为当style的值为true时，默认引入less文件，咱们这里就不多增加less配置项了（用的sass），当style的值为"css"时则会引入../lib/style目录下的css.js文件并执行引入对应的css文件,但这在next10中是不被容许的，next10中不容许中node_modules中执行js引入css,但容许间接引入css文件，这也就是为什么babel配置文件得是js格局而不能是.babelrc
这样就解决了咱们的css按需引入，没了，拜~~