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