在Next.js中使用antd组件库 - 菜鸟学院
菜鸟学院
栏目
标签
在Next.js中使用antd组件库
时间 2021-02-17
标签
javascript
css
java
node
sass
babel
antd
app
框架
less
栏目
JavaScript
繁體版
问题背景
今天想试着用React的next.js服务端框架来写页面玩,本能的掏出了老朋友antd来试试水,结果搞了半天都没用上,最后终于找到了解决方法.开文记录一下.javascript
解决方法
基于已经安装了next和antd,而且已经使用create-next-app脚手架命令建立了next应用.css
使用命令安装以下插件
yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
2.安装完毕后在next的项目下新建一个next.config.js文件修改打包配置.(当前使用版本为next10,默认没有该文件所以本身新建一个),新建完毕后添加以下代码java
const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
...withLess(
withSass({
lessLoaderOptions: {
javascriptEnabled: true,
},
})
),
});
3.styles文件夹下新建一个antd.less文件,(或者css也能够),把antd组件库对应的css文件导入. 个人以下node
@import "../node_modules/antd/dist/antd.css";
4.在pages文件夹下的_app.js文件中导入样式,即添加以下代码.此时antd的样式应该就能够被全局使用了sass
_app.js
import '../styles/antd.less'
5.组件中尝试添加一个Button,启动服务试试当作没成功.babel
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Button } from 'antd';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>首页</title>
</Head>
<h2>abc</h2>
// 这里试下button
<Button type="primary">Primary Button</Button>
</div>
ok,问题解决.antd
解决方法原文地址,感谢做者:https://dev.to/burhanuday/usi...app
相关文章
1. Next.js中使用antd组件
2. 学习 Next.js: 使用共享组件
3. 在antd-pro的form中使用Upload组件上传文件
4. typescript 中使用 antd Form 组件
5. antd 组件的使用
6. 使用Antd组件在React中写列表样式
7. 在react中使用antd-mobile
8. 使用babel-plugin-import实现antd组件库中的组件按需加载
9. react配置antd组件库
10. next.js 集成antd 小结
更多相关文章...
相关标签/搜索
next.js+antd
next.js
使在
在使
组件
使用库函数
使用
不使用插件
在用
用在
JavaScript
CSS
Java
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
1.
Siemens 1200PLC与GF120变频器DP通讯故障 报F1910
2.
自动刷步数
3.
Linux—FTP服务原理及配置
4.
mac开机启动项怎么设置,苹果电脑开机启动项在哪里设置
5.
Linux初探
6.
Redis主从复制入门
7.
含阿里内部技术栈PPT、PFD实战阿里资深专家打造从零开始学架构
8.
3.3.1 配置项列表-manifest.json-常用配置【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
9.
MLCC电容。
10.
3.3.2 uniStatistics 3.3.3 app-plus -manifest.json-常用配置【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
相关文章
1.
Next.js中使用antd组件
2.
学习 Next.js: 使用共享组件
3.
在antd-pro的form中使用Upload组件上传文件
4.
typescript 中使用 antd Form 组件
5.
antd 组件的使用
6.
使用Antd组件在React中写列表样式
7.
在react中使用antd-mobile
8.
使用babel-plugin-import实现antd组件库中的组件按需加载
9.
react配置antd组件库
10.
next.js 集成antd 小结
>>更多相关文章<<
联系我们
最近搜索
最新文章
沪ICP备2021010478号-7