如何使用 SCSS 在 NextJS 中实现全局样式？

Question

我想在我的 NextJS 应用程序中使用全局样式。根据文档，我编写代码的方式应该是正确的。但它没有得到应用。

• 我使用 SCSS 作为我的样式语言，使用 TSX 作为我的 nextjs 文件。
• 我的范围样式正在得到应用。

我的代码

_App.tsx

import "../components/SCSS/variables/AllVariables.global.scss";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

AllVariables.global.scss

@use "./breakpoints" as *;
@use "./changeable-settings" as *;
@use "./fixed-settings-color" as *;
@use "./fixed-settings-font" as *;
@use "./fixed-settings-grid" as *;
@use "./headings" as *;
@use "./zindex" as *;

正在导入到 AllVariables.global.scss 的文件中的两个示例：

$sm: 600px; // tablet
$md: 900px; // laptop
$lg: 1200px; // desktop
$xl: 1500px; // large desktop
$xxl: 3000px; // 4K desktop

:root {
  /* [Font Settings] */
  --xs-font-size: 0.6rem;
  --sm-font-size: 0.8rem;
  --reg-font-size: 1rem;
  --md-font-size: 1.2rem;
  --lg-font-size: 1.4rem;
  --xl-font-size: 1.6rem;
}

我遵循了 documentation 中的说明，其中指出 SCSS 的处理方式与 CSS 相同。正如前面提到的，我确实安装了 sass。并且here也同样解释了如何导入全局样式，以及here as well。

在这些示例中，他们使用 CSS 和 JS，我再次使用 SCSS 和 TSX。

在我看来，它应该工作，但显然，它没有。出了点问题，我找不到任何关于如何使用 SCSS 实现全局样式的官方来源。

Answer 1

几个小时以来，我一直在努力寻找解决方案。但我一直使用错误的关键字。

问题出在 TypeScript 和 App 上。

<块引用>

如果您的应用正在运行并且您刚刚添加了自定义应用，则需要重新启动开发服务器。仅当 pages/_app.js 之前不存在时才需要。

还有这个：https://nextjs.org/docs/basic-features/typescript#custom-app