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

在 Next.js 中全局添加 SCSS 的步骤大致如下：

1. 安装依赖

   你首先需要安装 sass 。可以通过 npm 或者 yarn 来安装：

   bash
   npm install sass

   或者

   bash
   yarn add sass

2. 创建全局 SCSS 文件

   在你的项目中创建一个 SCSS 文件，通常这个文件被放在 styles 文件夹中。例如，你可以创建一个叫做 globals.scss 的文件。

   scss
   // styles/globals.scss
   
   // 全局样式
   body {
     margin: 0;
     padding: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
       Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
   
   // 其他全局样式

3. 在 _app.js 或 _app.tsx 中导入全局 SCSS 文件

   在 pages 目录下打开 _app.js 或 _app.tsx 文件，并在文件顶部导入你的全局 SCSS 文件：

   javascript
   // pages/_app.js 或 pages/_app.tsx
   
   import '../styles/globals.scss'
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />
   }
   
   export default MyApp

   这样做可以确保全局样式在你的应用程序中被加载。

4. 使用 CSS Modules

   如果你需要在特定组件中使用 SCSS，你可以创建一个模块化的 SCSS 文件。例如，ComponentName.module.scss。然后你可以在你的组件中导入它，并像使用对象一样使用样式。

   scss
   // components/ComponentName.module.scss
   
   .example {
     color: blue;
   }

   在组件中使用：

   javascript
   // components/ComponentName.js 或 components/ComponentName.tsx
   
   import styles from './ComponentName.module.scss';
   
   function ComponentName() {
     return <div className={styles.example}>This is blue text.</div>;
   }
   
   export default ComponentName;

请注意，从 Next.js 9.3 开始，Next.js 已经支持对 Sass 的内置支持，所以你不需要安装其他的插件来处理 SCSS 文件。不过，node-sass 自 Next.js 10 起不再被推荐使用，因为它已经被废弃并由 sass（Dart Sass）取代。