在 Next.js 中添加 SASS 和 CSS modules-JavaScript中文网-JavaScript教程资源分享门户

如果你是一个前端开发者，那么你一定听说过 SASS 和 CSS modules 这两个技术。它们是在样式处理方面非常有用的工具。SASS 可以帮助我们更简洁、可维护地编写 CSS，而 CSS modules 则可以避免样式被全局污染的问题。在这篇文章中，我们将学习如何在 Next.js 中添加 SASS 和 CSS modules，并且我们会提供一些示例代码和指导。

为什么我们需要 SASS 和 CSS modules？

在我们开始之前，让我们先来回顾一下为什么我们需要 SASS 和 CSS modules 这两个工具。

SASS

在 CSS 中，有很多语法上的限制。这使得它难以编写复杂或大型的样式表。SASS 是一个 CSS 预处理器，它允许我们使用更加简洁和可读性更高的 CSS 代码，同时提供了一些非常有用的功能，如变量、嵌套规则、混合（mixins）等等。

CSS modules

CSS modules 是一种解决样式规则全局性问题的技术。在传统的 CSS 中，我们只需要将样式表导入页面即可，这就导致样式会全局生效，会有冲突问题。而 CSS modules 帮助我们避免了这个问题，它可以将样式表局部化，使得每个组件都有自己的样式规则，并且样式表内的类名只在组件范围内起作用。

Next.js 中的处理

如果你在使用 React，那么你或许已经听说过 Next.js。Next.js 是一个 React 框架，可以让我们更快速、更加轻松地构建 SSR、静态生成和无服务器应用程序。如果你想了解更多关于 Next.js 的内容，可以在官方文档中找到更加详细的信息。

接下来，我们需要在 Next.js 中添加对 SASS 和 CSS modules 的支持，这可以通过在 Next.js 中安装相应的依赖来实现，这些依赖包括 sass、sass-loader 和 @zeit/next-sass。这里，我们将会详细说明该怎么做。

安装依赖

首先，我们需要安装需要的依赖包。为此，我们可以使用 npm 或者 yarn：

# 使用 npm
npm install sass sass-loader @zeit/next-sass --save-dev

# 或者使用 yarn
yarn add sass sass-loader @zeit/next-sass --dev

安装完成后，我们需要在 Next.js 配置文件 next.config.js 中添加以下内容：

// javascriptcn.com 代码示例
// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['sass-loader'],
    });

    return config;
  },
});

在上面的代码中，我们首先导入了 @zeit/next-sass 模块，并通过 withSass 函数使用该模块。然后，我们在 webpack 函数中添加了一个规则，用于告诉 Webpack 在使用 sass-loader 处理 .scss 文件。

使用 SASS 和 CSS modules

设置好之后，我们就能够开始使用 SASS 和 CSS modules 了。下面是一个简单的示例，说明了如何在 Next.js 中使用 SASS 和 CSS modules：

// javascriptcn.com 代码示例
/* style.module.scss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.title {
  font-size: 24px;
  font-weight: 600;
}

// javascriptcn.com 代码示例
// index.js
import styles from './style.module.scss';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World!</h1>
    </div>
  );
}

在上面的代码中，我们首先定义了一个名为 .container 和 .title 的样式，它们存放在名为 style.module.scss 的 SASS 文件中。注意到这里的文件名是以 .module.scss 结尾的。这是因为我们需要使用 CSS modules 的机制来解决样式污染的问题。

然后我们在 index.js 文件中通过 import 语句将 .container 和 .title 样式导入，然后将它们绑定到我们的 JSX 元素中。我们可以看到，类名 styles.container 和 styles.title 是根据 style.module.scss 中样式规则的路径生成的。

总结

在这篇文章中，我们通过示例代码向大家展示了如何在 Next.js 中添加 SASS 和 CSS modules。SASS 可以帮助我们编写更简洁和易于维护的 CSS，而 CSS modules 可以帮助我们解决样式全局性污染的问题。我们希望这篇文章可以帮助你更好地了解如何在 Next.js 中使用这些技术，从而加速你的前端项目开发工作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65351c257d4982a6ebb2221e