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