zoukankan      html  css  js  c++  java
  • Next.js中使用antd组件

    Next.js中不能直接使用css,需要我们自行解决:

    一、先解决不能引入css,只能使用<style jsx>的问题

    (1)需要安装 @zeit/next-css : npm install  --save @zeit/next-css

    (2)安装成功,需要在根目录建立next.config.js

    const withCss = require('@zeit/next-css')
    
    if(typeof require !== 'undefined'){
        require.extensions['.css']=file=>{}
    }
    
    module.exports = withCss({})

    (3)重启项目

    二、引入antd

    (1)先安装Ant Design 库: npm install --save antd

    (2)再安装babel-plugin-import: npm install --save babel-plugin-import

           还需要根目录新建 .babelrc 文件进行配置

      目的:只加载项目中用到的模块,这就需要我们用到一个babel-plugin-import文件,配置好了 .babelrc 就不会把Ant Design打包到生产环境。

    {
        "presets":["next/babel"], // Next.js的配置文件,相当于继承了它本身的所有配置
        "plugins":[  // 增加新的插件,这个插件就是让antd可以按需引入,包括css
            [
                "import",
                {
                    "libraryName":"antd",
                    "style":"css"  // 引入css
                }
            ]
        ]
    }

    (3)重启项目

    (4)在需要的页面引入

    import '../static/common.css'
    import {Button} from 'antd'
    
    function Header(){
        return (
            <>
                <Button>我是按钮,你是吗</Button>
            </>
            
        )
    }
    export default Header
  • 相关阅读:
    3574. 乘积数量
    1357. 优质牛肋骨
    1356. 回文质数
    3554. 二进制
    13 vue路由跳转传参
    12 el-form的inline属性
    10 js数组赋值问题
    9 彻底搞懂json字符串和json对象
    8 element自定义卡槽的好处
    7 el-table表格中使用Dropdown 下拉菜单无法显示下拉框的问题
  • 原文地址:https://www.cnblogs.com/linjiu0505/p/11956717.html
Copyright © 2011-2022 走看看