nextjs和css的结合

最新推荐文章于 2025-06-02 09:02:51 发布

gjsbhd

最新推荐文章于 2025-06-02 09:02:51 发布

阅读量961

点赞数 1

CC 4.0 BY-SA版权

文章标签： css less

本文链接：https://blog.youkuaiyun.com/weixin_45645373/article/details/118678109

本文详细介绍了在使用Next.js时遇到的CSS集成问题，包括全局样式引入、组件内样式以及与CSSModule的配合。在_app.js中，可以直接导入样式文件，如comm.css和antd.css。组件内引入CSS时，需遵循CSSModule规范，注意使用:global修饰符进行全局样式定义。当使用:global(.ant-menu)时，需确保前面至少有一个选择器，例如.header:global(.ant-menu)。对于Sass和Less等预处理器的使用，建议参照Next.js官方文档。本文旨在帮助开发者避免Next.js中CSS集成的常见错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的官方文档吧