next-支持css樣式和按需加載antd

本文轉載自查看原文 2020-09-02 11:28 606 next.js

yarn add @zeit/next-css

在blog根目錄下，新建一個next.config.js文件。這個就是Next.js的總配置文件。寫入下面的代碼:

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

按需加載antd

yarn add antd 
yarn add babel-plugin-import

安裝完成后，在項目根目錄建立.babelrc文件，然后寫入如下配置文件。

{
    "presets":["next/babel"],  //Next.js的總配置文件，相當於繼承了它本身的所有配置
    "plugins":[     //增加新的插件，這個插件就是讓antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

在pages目錄下，新建一個_app.js文件，然后把CSS進行全局引入.

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

使用

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按鈕</Button></div>
 </>
)

export default Home

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 webpack antd 按需加載 antd-mobile的按需加載 React引入AntD按需加載報錯 create-react-app按需配置antd按需加載 antd圖標庫按需加載的插件實現 react按需加載 lodash按需加載 elementui按需加載 react 路由按需加載 vue router(按需加載)