在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