面试题：Next.js中如何配置Sass以支持全局样式？

Question

请描述在Next.js项目中，使Sass能够支持全局样式的具体配置步骤，包括相关文件的创建与修改，以及可能涉及到的依赖安装。

Answer 1

1. 安装依赖：
   • 确保项目中安装了next - sass和sass。可以通过npm或yarn进行安装。
   • 使用npm：

   npm install next - sass sass
   

   • 使用yarn：

   yarn add next - sass sass
   

2. 创建全局样式文件：
   • 在项目根目录下的styles文件夹（如果没有则创建）中，创建一个全局样式文件，例如globals.scss。
   • 在globals.scss中编写全局样式，比如：

   body {
     font - family: Arial, sans - serif;
     margin: 0;
     padding: 0;
   }
   

3. 修改_app.js文件：
   • 在pages/_app.js文件中导入全局样式文件。
   • 如果_app.js内容如下：

   import type { AppProps } from 'next/app';
   function MyApp({ Component, pageProps }: AppProps) {
     return <Component {...pageProps} />;
   }
   export default MyApp;
   

   • 修改为：

   import type { AppProps } from 'next/app';
   import '../styles/globals.scss';
   
   function MyApp({ Component, pageProps }: AppProps) {
     return <Component {...pageProps} />;
   }
   
   export default MyApp;
   

4. 配置next.config.js：
   • 如果项目根目录下没有next.config.js文件，则创建该文件。
   • 在next.config.js中添加如下配置：

   const withSass = require('next - sass');
   
   module.exports = withSass({
     // 其他next.js配置可以继续添加在这里
   });