Next.js中使用antd组件 - 简书


本站和网页 https://www.jianshu.com/p/37a90223eaa3 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

Next.js中使用antd组件 - 简书登录注册写文章首页下载APP会员IT技术Next.js中使用antd组件爱吃豆包关注赞赏支持Next.js中使用antd组件转载# 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 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
最后编辑于 :2020.10.26 11:46:24©著作权归作者所有,转载或内容合作请联系作者那些微信刷票是真的吗?人工投票会被主办方查到吗参加微信刷票的越来越多,在很多参加微信投票比赛的选手的眼里边,刷票公司就好像神一样存在,在很多的微信投票主办方的眼...神州坦诚网络公司阅读 8评论 0赞 0做什么生意赚钱,这些可以快速赚钱的生意做什么生意赚钱,这些可以快速赚钱的生意我们都渴望通过一些生意方式快速赚取额外的收入,实现财务上的自由。但在众多的商...日兼副业阅读 7评论 0赞 0淘宝返利的软件有哪些app 淘宝返利app排行榜自媒体平台正迅速崛起,成为现代人获取信息、娱乐、交流的重要渠道。而在自媒体平台上,淘宝返利软件也成为了网购达人们省...高省APP阅读 7评论 0赞 02023年淘宝双十二活动什么时候开始?2023年淘宝双十二优惠淘宝双12活动将在12月12日0点正式开启,持续到12月13日24点结束。这个重要的购物节日旨在为消费者们提供一个...氧惠全网优惠阅读 7评论 0赞 02023淘宝双十二活动什么时候开始,持续几天2023年双十二活动将于12月10日正式开启,持续到12月13日结束。这个重要的购物节日旨在为消费者们提供一个集中...氧惠全网优惠阅读 11评论 0赞 0剧本杀《献给爱子的谋杀》复盘详细解析+凶手角色剧透答案真相为了你获得更好的游戏体验,本文仅显示《献给爱子的谋杀》剧本杀部分真相复盘,获取完整真相复盘只需两步 ①【微信关注公...VX搜_小燕子复盘阅读 10评论 0赞 02023双12全网最全攻略!整体玩法解析2023年双十二购物节即将到来,许多消费者都在期待着这个一年一度的购物盛宴。然而,一些人可能会问,2023年双十二...日常购物技巧呀阅读 7评论 0赞 0莆田鞋十大良心微商推荐(盘点10个卖鞋的靠谱微商)莆田鞋一度在国内成为热门的商品,因其低廉的价格和高仿的外观而备受关注。然而,市场上的假冒伪劣产品数量众多,让消费者...美鞋之家阅读 7评论 0赞 1脾虚百病生 白开水里加点它你是否经常感到疲倦、头晕、食欲不振?这些都是脾虚的表现,今天就来聊聊如何通过饮食调理改善脾虚。 脾虚是一种常见的健...返金app平台高佣返利省钱阅读 5评论 0赞 0深入探究返利APP的使用方法和注意事项返利APP作为一种购物返利服务的工具,具有以下优势和使用技巧: 1. 节省开支:通过返利APP购物,您可以获得一定...返金app平台高佣返利省钱阅读 3评论 0赞 0评论0赞11赞2赞赞赏更多好文

Copyright ©uecom 京ICP备18064371号-1 IPV6
2024-03-29 14:21:33
uenu.com
10.0.12.16