npm i install antd
next默认不支持css样式,需要
npm i @zeit/next-css
npm i babel-plugin-import
npm i antd
一、创建next.config.js文件
// 让nextjs支持css的配置
const withCss = require('@zeit/next-css')
if (typeof require !== 'undefined') {
require.extensions['.css'] = file => { }
}
module.exports = withCss({})
// 让nextjs支持less的配置
// const withCss = require('@zeit/next-css')
// const withLess = less插件
// if (typeof require !== 'undefined') {
// require.extensions['.css'] = file => { }
// }
// module.exports = withLess(withCss({}))
二、创建.babelrc文件,集成配置
{
"presets": ["next/babel"],
"plugins": [["import", {
"libraryName": "antd"
}]]
}
可以用插件babel-plugin-import,自动将引入地址转换成按需引入的写法,所以我们采用插件。
但是现在的antd已经支持按需加载,不需要使用插件
三、引入
import { Button } from 'antd'
function HomePage() {
return <Button>Welcome to Next.js!</Button>
}
export default HomePage
四、修改next默认的app页面同文件夹下创建_app.js
import App from 'next/app'
import 'antd/dist/antd.css'
export default App