Nextjs 配置使用antd

Next.js中不能直接使用css，需要自己安裝插件。

插件安裝

yarn add @zeit/next-css antd  babel-plugin-import

配置文件的寫入

next.config.js

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

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

module.exports = withCss({})

.babelrc

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

    [
      "import",
      {
        "libraryName": "antd",
     //"style":"css"   wenpack語法報錯 引入css
      }
    ]
  ]
}

由于.babelrc文件 引入css語法會報錯，所以在pages新建一個_app.js

import App from 'next/app'
import 'antd/dist/antd.css'
import '../static/style/pages/comm.css'

export default App
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容