nextjs和css结合
最近学习nextjs,在css上踩了不少的坑,nextjs对于css的约束相比于平常开发要多一些,另外还和css module结合,很容易出错,下面把nextjs和css结合总结下来。
_app.js
在全局的_app.js中nextjs和正常开发使用一样,直接import引入就行
import '../styles/page/comm.css'
import 'antd/dist/antd.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
引入node_modules中的样式
跟_app.js中引入几乎一样
import ‘antd/dist/antd.css’
组件中引入样式
nextjs中引入css最特殊的地方就是在组件中引入了,有下面几点需要注意
- 引入的css需要是css module规范,命名为name.module.css这样的格式
- nextjs已经内置了css支持,不需要配置就支持css module
- css module中全局作用域的书写方式
css module规范这里就不提了,重点提一下全局作用域:global
- 对于一些引入的ui库,要根据ui库设置的类名改变里面的样式经常会使用全局作用域:global,而不经过类名转换
- nextjs中使用全局作用域和配置webpack使用有些差别,webpack配置的:gobal(类名)就能够使用,但是nextjs中这样使用会报错
:global(.ant-menu){
line-height: 2.6rem;
}
需要前面至少有一个选择器
.header :global(.ant-menu){
line-height: 2.6rem;
}
报错解决,编译成功
sass,less
这些看nextjs的官方文档吧