Next.js框架中引用css样式_nextjs css

新版的next.js框架中可以直接引用css样式，不过是全局引入和组件引入是分开的

在样式文件夹中有两个css文件，第一个是全局样式的引入，第二个是组件的css样式，这的css文件后缀名是固定的，改成其他的会报错，不加module next.js框架会误以为是全局样式，会引发冲突报错。

全局样式和第三方库的css样式要统一在_app.js中引入：

//_app.js
import 'antd/dist/antd.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

比如引入antd design这个第三方库，然后在组件中引入运用：

//header.js
import {Button} from 'antd'
function Header(){
	return(
			<>
				<Button>123</Button>
			</>
		)
}
export default Header

组件的css样式这样导入：

//header.js
import css from '../styles/header.module.css'
function Header(){
	return(
			<>
				<button className={css.number}>123</button>
			</>
		)
}
export default Header