在 Next.js 中使用 .modules.scss 时未应用样式

发布于08月03日

我已经启动了一个Next.js 13应用程序，

我有一份main.modules.scss%的档案

.heading {
    font-size: 4rem;
    color: #000;
}

.dark .heading {
    color: #fff;
}

我正在使用它来设置如下组件的样式

import styles from "@/styles/main.module.scss";

export default function Home() {
    return (
        <>
            <Header />
            <h1 className={styles["heading"]}>Hi! I was styled by scss</h1>
        </>
    );
}

来自.heading类的样式得到了正确应用，但来自.dar.heading的属性却没有得到正确apply.

我的主题提供程序确实向HTML元素添加了一个.dark类.

我使用了一个普通的.scss文件，并应用了如下所示的类

    <h1 className="heading">Hi! I was styled by scss</h1>

然后它工作得非常好

在 Next.js 中使用 .modules.scss 时未应用样式

推荐答案

为什么这会奏效？

Css相关问答推荐

相对于现有的转换3D应用关键帧动画

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式？

防止表格水平拉伸整个Blazor页面

为什么在RadixUi上应用Tailwincss和自定义css类不起作用？

如何在横向和纵向布局上使用 CSS 网格中的纵横比来保持纵横比

如何取消 CSS 伪类中的属性设置？

为什么 CSS Calc() 函数只需要+或-运算符前后有空格

更改多边形外部的文本 colored颜色

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

使用 flexbox 使图像与内容高度相同

弹性布局溢出时的换行符

如果中间元素的内容不适合 CSS，如何将其分隔到新行？

CSS：如何在嵌套计数器中有多个计数器

紫色表示访问过的超链接

在表格中使用自动换行：断词

在 css 中使用 FontAwesome 或 Glyphicons ：before

通过javascript删除或禁用浏览器的焦点边框

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

输入和文本字段中的背景 colored颜色

使用没有设置宽度或高度的边界半径的胶囊形状？