文章目录
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 文件(更安全)