嵌套的CSS样式不在Next.JS中应用。
嵌套的CSS样式不在Next.JS中应用是因为Next.JS默认使用CSS模块化的方式来管理样式，而嵌套的CSS样式在CSS模块化中无法正确解析和应用。
CSS模块化是一种将CSS样式与组件进行绑定的方法，以避免全局样式冲突和命名空间污染。在Next.JS中，通过使用CSS模块化，每个组件都拥有独立的样式作用域，并且可以通过生成唯一的CSS类名来保证样式的独立性和可重用性。
然而，由于嵌套的CSS样式使用了层叠选择器（如父子选择器）来定义样式规则，而CSS模块化无法正确解析和处理这种层级关系，导致嵌套的样式无法被应用到对应的组件上。
解决这个问题的方法有两种：
- 将嵌套的CSS样式转换为平铺的方式。即将嵌套的选择器展开，将样式规则直接应用到组件的类名上，避免使用父子选择器等层叠选择器。这样可以保证样式的正确应用，但可能会增加样式冗余和维护难度。
- 使用第三方库或工具来支持嵌套的CSS样式。有一些CSS预处理器或后处理器（如Less、Sass、PostCSS）提供了嵌套样式的功能，可以在开发过程中使用这些工具来编写嵌套的样式，并在构建或打包过程中将其转换为平铺的方式。
在腾讯云的产品和服务中，可以使用腾讯云Serverless服务和云函数来构建和部署Next.JS应用，详细信息请参考腾讯云Serverless Framework产品介绍：https://cloud.tencent.com/product/sf
相关·内容
不幸的是，嵌套的css样式没有应用到网页中。导入下面的css文件作为auth.module.scss，也没有导入错误。此应用程序还涉及AMP页面。如果我遗漏了什么请纠正我。
浏览 21提问于2020-11-04得票数 1
我正在为一个使用next的学校项目构建一个简单的站点，并且我成功地使用了现在使用的next.js应用程序，但是没有应用任何样式。一切都很好，在本地主机上工作(看起来)很好，但不在网上()。我想这与now.json文件有关，但是他们的文档使它看起来一切都是凭空捏造的，而且它是真的，除了样式。我查看了文档，没有发现任何东西，我想知道是否有人有使用now和next.js的</em
浏览 1提问于2018-11-15得票数 3
回答已采纳
各位，我是Next.js 13的新手。我正在尝试应用使用尾风CSS的样式。我遵循了下面的Next.js文档：
文档要求将global.css样式表导入根布局(app/layout.js)，以便将样式应用于应用程序中的每个路由。我试着
浏览 11提问于2022-11-11得票数 -1
我正在用next.js开发一个应用程序，为了一个目的，我需要在iframes中使用。正如在中发现的那样，它工作得很好:我的组件在iframe中呈现，并与整个应用程序交互，尽管它不在同一个页面中。只剩下一件事: next.js会自动在我的根网页中插入样式。
我希望获得该样式，并将其复制/转发到iframe中，以便门户中<
浏览 4提问于2021-04-11得票数 3
回答已采纳
2回答
我有一个组件，利用CSS-模块，通过babel-plugin-react-css-modules插件.
在组件生命周期的某些时候，我希望能够通过直接访问DOM来为组件计算新的维度。在我的SCSS样式表中，我有一个名为.full-width的类，我想将它应用到组件的DOM元素中，以便进行计算，然后再次删除它。如果我做了this.DOMReference.classList.add('full
浏览 8提问于2017-09-11得票数 3
回答已采纳
/node_modules/owl.carousel/dist/assets/owl.carousel.css ModuleParseError:模块解析失败:意外字符'�‘(1:0)您可能需要一个适当的加载程序来处理该文件类型参见 (此二进制文件省略的源代码)
浏览 4提问于2020-04-01得票数 0
回答已采纳
解决了- TLDR；将import '@fortawesome/fontawesome-svg-core/styles.css'添加到_app.js / index.js文件中，修复了问题，FontAwesome我的问题是由npx-create-next-app (默认情况下包括purgeCSS )引起的，而这反过来又去掉了FontAwesome所需的样式。我正在我的下一个应用程序中使用FontAwes
浏览 5提问于2021-03-09得票数 7
回答已采纳
3回答
我正在尝试将集成到Next.js应用程序中。作为安装过程的一部分，他们说，在我的应用程序中包括以下样式表：/node_modules/react-resizable/css/styles.css
我该怎么做呢
浏览 1提问于2020-10-04得票数 2
回答已采纳
我尝试使用PostCss和next.js，它只允许我在主_app.js文件中添加主css文件，这使得所有的输出样式都是全局的，
如何为每个页面甚至每个组件创建css文件？
浏览 3提问于2020-03-31得票数 1
默认情况下，next.js会创建一个外部文件并将css推送到该文件。但是放大器只支持内联风格。如何在amp模式下配置next.js以支持css (尾风css)。现在，默认情况下，next.js只支持amp模式下的样式。我以前在中问过这个问题，但没有得到任何答案。
浏览 1提问于2019-12-06得票数 0
1回答
如果我导入完整的引导css import 'bootstrap/dist/css/bootstrap.min.css'; 然后它破坏了我网站的其余部分的css，所以我想把它的范围扩大到我需要它包含的变量(导航栏之类的东西) 我遵循了推荐的答案here，但它似乎不起作用。第一次尝试我尝试了这个： .bootstrap {
@import
浏览 18提问于2021-08-02得票数 0
回答已采纳
1回答
我有一个next.js项目。对于造型，我正在使用顺风，scss模块和postcss。我没有凌驾webpack的配置。在开发模式中，next.js按预期在标记中注入样式，但在生产中它同时注入类似于*.css块和标记的样式。
浏览 2提问于2022-07-03得票数 1
回答已采纳
2回答
在我的nextJS应用程序中，我需要根据从数据库接收的用户首选项动态加载样式表。因此，在我的页面中，我将它添加到Head (next/head)中，如下所示：<link rel="stylesheet" href={`/fonts/${type}/stylesheet.css"> tag with href="&#x
浏览 24提问于2022-04-18得票数 0
我想使用Next.js与Sass和CSS模块，但也想使用Ant Design，并希望使用较小的建筑尺寸较少的样式。 我可以启用CSS模块或更少的加载器，但不能同时启用两者。Next.js中的例子并没有帮助我完成这个问题。
浏览 177提问于2020-04-16得票数 22
回答已采纳
1回答
我读过一些关于这方面的不同消息来源，根据的说法
Next.js在JS框架中预装了一个名为styled jsx的</em
浏览 2提问于2019-12-06得票数 4
在我的Next.JS应用程序中，我用_app.js导入样式表，如下所示：Index.css包含以下内容： margin: 20px auto 0;如何解决错误消息：
(./node_modules/css-loader/dist
浏览 6提问于2020-07-13得票数 30
回答已采纳
3回答
我正在使用Next.js创建一个React应用程序，并尝试使用reactstrap提供的组件。我似乎遇到的问题似乎涉及按照reactstrap指南所说的那样导入名为bootstrap/dist/css/bootstrap.min.css的CSS文件。我看到的错误是Error in bootstrap/dist/css/bootstrap.m
浏览 1提问于2018-04-24得票数 25
回答已采纳
2回答
我试图找出一个很好的工作流程，如何在Next.js中使用Tailwind和CSS，但是我遇到了一些棘手的问题，涉及到Webpack插入样式的顺序和特性。然而，我在这里看到一些小问题：
&
浏览 7提问于2021-03-16得票数 12
我正在将现有的React应用程序转换为使用Next.js，但我在生产版本上遇到了问题。我正在使用情感来添加一个用于样式的css道具。我的应用程序中的页面呈现良好，直到它们预取链接，在这一点上样式从当前页面消失。也有一些奇怪的间歇性行为-有时当我刷新页面时，我可以在页面之间导航，而样式不会消失，但最终它们会再次消失。检查组件显示css属性的值没有改
浏览 0提问于2021-02-25得票数 1
我正在将一个用创建的项目迁移到nextjs，我遇到了这个问题Global CSS cannot be imported from within node_modulesRead more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\react-
浏览 2提问于2021-12-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
