Next.js脚手架不支持直接引入css解决，并按需加载ant UI_next.js中不支持import引入css样式-CSDN博客

跟着技术pang老师的教程https://jspang.com/detailed?id=51#toc239
自己配了一下做个笔记

首先是next的脚手架

npm install -g create-next-app
$ npx create-next-app next——app

正常的写

<style jsx>{`
...
`}</style>

这种方式可以直接用但是有点冗余，而且没有css的代码提示，还是比较想用import

当我需要import引入css文件的时候发现会报错

是因为项目模式的不支持，所以需要自己配置一下

cnpm install @zeit/next-css

然后根目录下，写一个next.config.js

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

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

module.exports = withCss({})

重启项目 npm run dev已经可以发现成功引入了，虽然有这么一句warn但是确实可以看见页面效果，哪个page需要什么样式就单独引入css，不过css根据页面懒加载的，如果build就是全局的，所以一定要做好选择器

然后是配置一下ant的按需加载

参考可以看一下ant-mobile的配置，pc端哪个已经略了。。

cnpm install antd --save
cnpm install babel-plugin-import --save

然后根目录下新建.babelrc文件，按照上图文档的配置是不行的，需要保留next的默认配置
{
“presets”:[“next/babel”], //Next.js的总配置文件，相当于继承了它本身的所有配置，这里直接用技术pang老师的配置

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