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

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

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

我的代码

\u App.tsx

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

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

导入到

AllVariables.global.scss

的文件中的两个示例：

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

我遵循了来自的说明，其中说明SCS的处理方式与CSS相同。正如前面提到的，我确实安装了

sass

。同样，还解释了如何导入全局样式，以及

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

---

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

我花了几个小时试图找到解决方案。但我一直使用错误的关键字

问题在于TypeScript和App

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

---

这是：

您安装了node sass吗？@Freestyle09 node sass不推荐使用。正如我在帖子中提到的，我安装了

sass

。我还说我的范围样式有效，唯一的问题是我的全局样式。是的，我现在看到了，尝试为body元素实现背景色，以检查导入是否正确写入。这是我要问的问题。我的全球风格行不通，我在这里问我的问题的解决方案是什么。我的全球风格中的任何东西都没有被应用。你试过了吗？干得好；）很高兴你找到了答案

$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;
}