面试题：Next.js中Sass样式的基础配置与使用

Question

请描述在Next.js项目中如何配置Sass以使其能够正常使用。假设项目已有基本结构，需详细说明安装依赖的步骤、配置文件的修改等。另外，如何在页面组件中导入并使用Sass编写的样式？

Answer 1

1. 安装依赖： 在项目根目录下，通过npm或yarn安装node - sass和sass - loader。
   • 使用npm：

npm install node - sass sass - loader

- 使用yarn：

yarn add node - sass sass - loader

2. 配置文件修改： 在Next.js项目中，通常不需要额外配置文件来支持Sass，因为Next.js默认支持Sass。但是，如果有特殊需求，可以在项目根目录下创建或修改next.config.js文件，内容如下：

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    // 其他Sass配置选项，如自定义导入等
  },
};

这里假设项目中有一个styles文件夹存放Sass相关文件，includePaths指定了Sass导入文件的查找路径。

3. 在页面组件中导入并使用Sass样式：
   • 创建Sass文件，例如在styles文件夹下创建styles.scss文件：

body {
  background - color: lightblue;
}

- 在页面组件（如`pages/index.js`）中导入Sass样式：

import styles from '../styles/styles.scss';

export default function Home() {
  return (
    <div className={styles}>
      <h1>Welcome to Next.js with Sass</h1>
    </div>
  );
}

这里通过import styles from '../styles/styles.scss';导入Sass样式，并将其应用到组件的div元素的className上。如果Sass文件中定义了多个类，在className中可以像普通CSS类名一样使用，例如className={${styles.mainClass} ${styles.subClass}} 。