为什么SASS @each语句在Next.js中不起作用？

SASS @each 语句在 Next.js 中不起作用可能是由于以下几个原因：

基础概念

SASS 是一种 CSS 预处理器，它允许开发者使用变量、嵌套规则、混合、继承等功能来编写更简洁、更易于维护的 CSS 代码。@each 是 SASS 中的一个控制指令，用于遍历列表或映射，并为每个项生成样式规则。

可能的原因

1. SASS 配置问题：Next.js 默认不支持 SASS，需要安装和配置相应的插件。
2. 文件命名问题：Next.js 对文件命名有一定的要求，如果 SASS 文件命名不正确，可能会导致编译失败。
3. 语法错误：@each 语句的语法可能有误，导致编译器无法正确解析。
4. 版本兼容性问题：使用的 SASS 版本与 Next.js 不兼容。

解决方法

1. 安装和配置 SASS 插件： 首先，确保你已经安装了 sass 和 @zeit/next-sass（或 @next/css）插件。
2. 安装和配置 SASS 插件： 首先，确保你已经安装了 sass 和 @zeit/next-sass（或 @next/css）插件。
3. 然后在 next.config.js 中配置：
4. 然后在 next.config.js 中配置：
5. 检查文件命名： 确保你的 SASS 文件命名正确，例如 styles.scss 或 styles.module.scss。
6. 检查语法： 确保 @each 语句的语法正确。例如：
7. 检查语法： 确保 @each 语句的语法正确。例如：
8. 更新依赖版本： 确保你使用的 SASS 和 Next.js 版本是最新的，并且兼容。
9. 更新依赖版本： 确保你使用的 SASS 和 Next.js 版本是最新的，并且兼容。

示例代码

以下是一个完整的示例，展示了如何在 Next.js 中使用 SASS @each 语句：

styles.module.scss

$colors: (primary: #3498db, secondary: #2ecc71);

@each $key, $value in $colors {
  .text-#{$key} {
    color: $value;
  }
}

pages/index.js

import React from 'react';
import styles from '../styles/styles.module.scss';

const Home = () => (
  <div>
    <h1 className={styles['text-primary']}>Primary Color</h1>
    <h1 className={styles['text-secondary']}>Secondary Color</h1>
  </div>
);

export default Home;

参考链接

• Next.js 官方文档 - CSS 和 SASS 支持
• SASS 官方文档 - @each 指令

通过以上步骤，你应该能够解决 SASS @each 语句在 Next.js 中不起作用的问题。