Next.js腳手架不支持直接引入css解決，並按需加載ant UI

跟着技術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"
            }
        ]
    ]
}

用build打包的話另有問題,看這個
Next.js腳手架zai在引入antd之後打包報錯簡單解決