next-支持css样式和按需加载antd
yarn add @zeit/next-css
在blog
根目录下,新建一个next.config.js
文件。这个就是Next.js
的总配置文件。写入下面的代码:
const withCss = require('@zeit/next-css') if(typeof require !== 'undefined'){ require.extensions['.css']=file=>{} } module.exports = withCss({})
按需加载antd
yarn add antd
yarn add babel-plugin-import
安装完成后,在项目根目录建立.babelrc
文件,然后写入如下配置文件。
{ "presets":["next/babel"], //Next.js的总配置文件,相当于继承了它本身的所有配置 "plugins":[ //增加新的插件,这个插件就是让antd可以按需引入,包括CSS [ "import", { "libraryName":"antd" } ] ] }
在pages目录下,新建一个_app.js
文件,然后把CSS进行全局引入.
import App from 'next/app' import 'antd/dist/antd.css' export default App
使用
import React from 'react' import Head from 'next/head' import {Button} from 'antd' const Home = () => ( <> <Head> <title>Home</title> </Head> <div><Button>我是按钮</Button></div> </> ) export default Home