在Next.js中使用antd组件

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

最近在研究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
关注一下,或许能让你获得更多前端咨询信息。
加载中...

评论 抢沙发

评论前必须登录(开发中...)