在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