Next.js中使用antd组件

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 '../static/common.css'
import {Button} from 'antd'

function Header(){
    return (
        <>
            <Button>我是按钮,你是吗</Button>
        </>
        
    )
}
export default Header

 

posted @ 2019-11-29 11:33  林玖女神  阅读(1426)  评论(0编辑  收藏