Next.js Sass SCSS集成

Next.js Sass/SCSS集成

介绍

Sass/SCSS（Syntactically Awesome Style Sheets）是一种流行的CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套规则、混合（Mixins）、模块化等特性，使样式编写更高效、可维护。Next.js原生支持Sass/SCSS，开发者可以直接在项目中集成并使用这些功能，无需额外配置（在最新版本中）。本章将详细介绍如何在Next.js项目中配置和使用Sass/SCSS，并通过示例展示其实际应用。

安装与配置

在Next.js中使用Sass/SCSS需要安装`sass`包。运行以下命令：

npm install sass
# 或
yarn add sass

安装完成后，Next.js会自动识别`.scss`和`.sass`文件。无需修改`next.config.js`，除非需要自定义Sass选项。

基本用法

创建Sass文件

在项目中创建一个SCSS文件（例如`styles/main.scss`），内容如下：

// 定义变量
$primary-color: #0070f3;
$padding: 16px;

// 嵌套规则
.container {
  padding: $padding;
  .title {
    color: $primary-color;
    &:hover {
      text-decoration: underline;
    }
  }
}

在组件中引入

在Next.js组件中直接导入SCSS文件：

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

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, Next.js with SCSS!</h1>
    </div>
  );
}

输出CSS

编译后，生成的CSS如下：

.container {
  padding: 16px;
}
.container .title {
  color: #0070f3;
}
.container .title:hover {
  text-decoration: underline;
}

高级特性

模块化Sass

Next.js支持Sass模块化（文件名需包含`.module.scss`），避免全局样式冲突。例如：

// styles/module.module.scss
.button {
  background: $primary-color;
  &-disabled {
    opacity: 0.5;
  }
}

在组件中使用：

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

export default function Button() {
  return (
    <button className={styles.button}>
      Click Me
    </button>
  );
}

全局变量与混合

通过`@use`或`@forward`共享变量和混合。创建`styles/_variables.scss`：

// _variables.scss
$border-radius: 8px;
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

在其他文件中引用：

@use './variables' as vars;

.card {
  @include vars.flex-center;
  border-radius: vars.$border-radius;
}

实际案例

主题切换

结合CSS变量和Sass实现动态主题：

// _themes.scss
:root {
  --primary: #0070f3;
  --background: white;
}

[data-theme="dark"] {
  --primary: #ffffff;
  --background: #222;
}

在组件中切换主题：

import { useEffect } from 'react';
import './styles/themes.scss';

export default function ThemeToggle() {
  const toggleTheme = () => {
    document.documentElement.setAttribute(
      'data-theme',
      document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
    );
  };

  return <button onClick={toggleTheme}>Toggle Theme</button>;
}

性能优化

Next.js默认会为Sass文件启用CSS压缩和自动前缀。若需自定义，可在`next.config.js`中配置：

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    prependData: `@use "variables" as *;`, // 全局注入
  },
};

总结

Next.js的Sass/SCSS集成简化了样式开发流程，支持模块化、变量、混合等高级特性。通过合理的项目结构设计（如全局变量文件、模块化样式），可以显著提升代码的可维护性和复用性。初学者应从基础语法入手，逐步掌握嵌套、模块化等技巧，而高级用户可探索主题切换、性能优化等场景。