next-支持css样式和按需加载antd 

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

 

posted on 2020-09-02 11:28  秃了头也不退休  阅读(939)  评论(0)  编辑  收藏  举报

导航