问题背景
今天想试着用React的next.js服务端框架来写页面玩,本能的掏出了老朋友antd来试试水,结果搞了半天都没用上,最后终于找到了解决方法.开文记录一下.
解决方法
基于已经安装了next和antd,并且已经使用create-next-app脚手架命令创建了next应用.
- 使用命令安装如下插件
yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less2.安装完毕后在next的项目下新建一个next.config.js文件修改打包配置.(当前使用版本为next10,默认没有该文件因此自己新建一个),新建完毕后添加如下代码
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文件导入. 我的如下
@import "../node_modules/antd/dist/antd.css";
4.在pages文件夹下的_app.js文件中导入样式,即添加如下代码.此时antd的样式应该就可以被全局使用了
_app.js
import '../styles/antd.less'5.组件中尝试添加一个Button,启动服务试试看成没成功.
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,问题解决.
解决方法原文地址,感谢作者:
https://dev.to/burhanuday/usi...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。