1、配置antd-mobile

npm install antd-mobile --save
or
npm install antd --save

2、按需加载antd-mobile组件

因为nextJs 默认不支持css 因此需要安装插件 @zeit/next-less(自己项目编写用到) 和@zeit/next-css(加载antd 样式用到)

1、安装加载css 插件 和 babel-plugin-import

npm install @zeit/next-less @zeit/next-css --save
npm install babel-plugin-import -save

2、 第一种配置按需加载

根目录创建下
next.config.js

const withLess = require('@zeit/next-less')
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withLess(withCss({
  /* config options here */
}))

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd-mobile",
                "libraryDirectory": "lib", // es es6 lib es5
                "style": "css" // `style: true` 会加载 less 文件
            }
        ]
    ]
}

2、 第二种配置按需加载

next.config.js 文件同上
.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd-mobile"
            }
        ]
    ]
}

新增 pages/_app.js

import App from 'next/app';
// import 'antd/dist/antd.css'
import 'antd-mobile/dist/antd-mobile.css'
export default App;

总结：

• 第一种方法对于mini-css-extract-plugin 有BUG（影响不大）
• 第二种方法相当于全局引入css 文件（更安全）