nextjs和css的结合_next.js css module

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
1
2
3
4
5
6
7

引入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

1. 对于一些引入的ui库，要根据ui库设置的类名改变里面的样式经常会使用全局作用域:global，而不经过类名转换
2. nextjs中使用全局作用域和配置webpack使用有些差别，webpack配置的:gobal(类名)就能够使用，但是nextjs中这样使用会报错

:global(.ant-menu){
    line-height: 2.6rem;

}
1
2
3
4

需要前面至少有一个选择器

.header :global(.ant-menu){
    line-height: 2.6rem;

}
1
2
3
4

报错解决，编译成功
sass,less
这些看nextjs的官方文档吧