从0死磕全栈之在 Next.js 中使用 Sass

Next.js 原生支持 Sass（Syntactically Awesome Style Sheets），让你可以轻松地在项目中使用 .scss 或 .sass 文件编写样式。本文将详细介绍如何在 Next.js 应用中集成 Sass，并提供实用的代码示例，涵盖基础用法、CSS Modules、变量导出以及自定义配置等内容。

1. 安装 Sass

首先，你需要安装 sass 包作为开发依赖：

bash 复制代码

npm install --save-dev sass

安装完成后，Next.js 就能自动识别 .scss 和 .sass 文件。

💡 提示：

.scss 使用类似 CSS 的语法（推荐初学者使用）

.sass 使用缩进式语法（称为 "Indented Syntax"）

2. 全局 Sass 样式

你可以在 app 目录下的根布局（如 app/layout.tsx）中导入全局 .scss 文件：

app/globals.scss

scss 复制代码

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.title {
  color: #333;
  font-size: 2rem;
}

app/layout.tsx

tsx 复制代码

import './globals.scss';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

3. 使用 CSS Modules（组件级样式）

Next.js 支持通过 CSS Modules 实现局部作用域的 Sass 样式。只需将文件命名为 [name].module.scss 即可。

app/components/Button.module.scss

scss 复制代码

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #0070f3;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #0051b3;
  }
}

app/components/Button.tsx

tsx 复制代码

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

export default function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.btn}>{children}</button>;
}

✅ 这种方式避免了样式冲突，非常适合组件化开发。

4. 导出 Sass 变量到 JavaScript

Next.js 支持从 Sass 文件中导出变量，供 JavaScript 使用。这在需要动态设置样式（如主题色）时非常有用。

app/styles/variables.module.scss

scss 复制代码

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

app/page.tsx

tsx 复制代码

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

export default function HomePage() {
  return (
    <h1 style={{ color: variables.primaryColor }}>
      Hello, Next.js with Sass!
    </h1>
  );
}

📌 注意：必须使用 :export 块才能将 Sass 变量暴露给 JS。

5. 自定义 Sass 配置

你可以在 next.config.ts（或 .js）中通过 sassOptions 自定义 Sass 行为。

示例 1：注入全局变量

ts 复制代码

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$primary: #0070f3;`, // 所有 Sass 文件自动可用
  },
};

export default nextConfig;

现在你可以在任意 .scss 文件中直接使用 $primary，无需导入。

示例 2：更换 Sass 实现

Next.js 默认使用 sass（Dart Sass），但你也可以指定其他实现，比如 sass-embedded：

ts 复制代码

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
};

6. 最佳实践建议

优先使用 .scss：语法与 CSS 兼容，学习成本低。
组件样式用 .module.scss：避免全局污染。
全局变量集中管理 ：通过 :export 或 additionalData 统一主题色、间距等。
避免过度嵌套：Sass 虽支持深层嵌套，但可能导致生成的 CSS 选择器过于复杂。

总结

Next.js 对 Sass 的集成非常友好，无论是全局样式、模块化组件样式，还是变量共享，都能轻松实现。通过合理使用 Sass 的强大功能，你可以构建出结构清晰、易于维护的现代 Web 应用。

✅ 现在就去你的 Next.js 项目中试试 Sass 吧！