在Next.js中使用antd组件

 2020年03月03日 分类:React/前端设计  评论(0)  阅读(3207)

最近在研究Next,然后又想使用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

来源:https://www.cnblogs.com/linjiu0505/p/11956717.html

标签:
wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...
分享中心
各类业务开发,联系QQ:5679361
广告位联系QQ:5679361

评论 抢沙发

评论前必须登录


如果你觉得本站内容对你有所帮助,比如提升你对编程方面的认识,你可以通过上面的二维码请博主喝杯咖啡,安好。

WEB前端开发部落(公众号:webapp_club)

群列表

前端初级学习群:初级Web前端学习群(后期为支付入群)
PHP初级学习群:PHP(MySQL)学习交流群
QQ群仅作为相关领域讨论平台,均提供高质量问题交流,禁止闲聊,无法接受的朋友请勿加群!
进群需要通过这里获取进群码才能进群哦!