如何使用 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;
}

我遵循了文档中的说明，其中指出 SCSS 的处理方式与 CSS 相同。sass正如提到的那样，我确实安装了。而且这里也解释了，同样的方式，如何导入全局样式，这里也是。

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

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

Answer 1

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

问题出在 TypeScript 和 App 上。

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

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