Next.js中使用antd组件
2020-10-26 本文已影响0人
爱吃豆包
Next.js中不能直接使用css，需要我们自行解决：
一、先解决不能引入css，只能使用<style jsx>的问题
（1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css
（2）安装成功，需要在根目录建立 next.config.js
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
(3)重启项目
二、引入antd
（1）先安装Ant Design 库： npm install --save antd
（2）再安装babel-plugin-import： npm install --save babel-plugin-import
还需要根目录新建
.babelrc文件进行配置
目的：只加载项目中用到的模块，这就需要我们用到一个babel-plugin-import文件，配置好了 .babelrc 就不会把Ant Design打包到生产环境。
{
"presets":["next/babel"], // Next.js的配置文件，相当于继承了它本身的所有配置
"plugins":[ // 增加新的插件，这个插件就是让antd可以按需引入，包括css
[
"import",
{
"libraryName":"antd",
"style":"css" // 引入css
}
]
]
}
（3）重启项目
（4）在需要的页面引入
import Head from 'next/head'
import { Button } from 'antd'
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<Button type="primary">这是一个按钮</Button>
</main>
</div>
)
}
结果页面.png
