前端开发中，CSS 是必不可少的一部分，而 SCSS 是 CSS 的一种预处理语言，能够在已有的 CSS 语法的基础上增加了许多功能与特性，使用 SCSS 可以更加方便快捷地编写可维护的样式代码。
而 Next.js 是一种基于 React 的 SSR（服务端渲染）框架，是一个非常流行的前端框架。它本身已经默认支持了样式处理，但是，默认的样式处理方式并不支持 SCSS，那么该如何在 Next.js 中使用 SCSS 呢？接下来让我们深入探讨一下。
第一步：安装依赖
在使用 SCSS 前，我们首先需要安装相关的依赖，使用 npm 的命令行工具安装 node-sass 和 sass-loader 两个依赖：
npm install node-sass sass-loader --save-dev 或者 yarn add node-sass sass-loader -D
第二步：添加 webpack 配置
为了让 Next.js 支持 SCSS，需要在项目中添加一个 webpack 配置文件 next.config.js，并且在其中配置需要使用到的 loader。代码如下：
-- -------------------- ---- -------
----- -------- - --------------------------
-------------- - ----------
-------- -------- - -------- -- -- -
-- ---------- -
----- --------- - -------------------------
---- -- ------ ---------- --- -------- -- ----------------
- -- ------------- --- ----- -- -------- -- -----------------------
--
-------------
- -- ------------- --- ----- -- -------- -- -----------------------
------------ -- -------- --- --------------
------------------------- - -
----- --------
--------------- ------------------
-------- ----------
----------- -----------------
--
-
---- -
--------------------------
----- ----------
---- -
- ------- -------------- --
- ------- ------------- -------- - -------------- - - --
- ------- ------------- -
-
---
-
------ -------
-
--以上的 webpack 配置文件中，我们通过 webpack 的 module.rules 找到了 css-loader 并将其配置上了 localIdentName 的参数，以产生唯一的 css 类名。
第三步：编写样式
最后一步，我们可以在 SCSS 中编写样式代码，通过在组件中 import 来使用样式，其中可以使用类似 CSS 模块化的方式来避免样式冲突，示例如下：
-- -------------------- ---- -------
-- ----------- --
------ -
------ ----
-
-- -------- --
------ ----- ---- -------
------ ------ ---- ---------------
------ ------- -------- ------ -
------ -
---- -------------------------
------ -----
------
-
-至此，我们就成功地在 Next.js 中使用了 SCSS。
总结
使用 SCSS 可以让我们更好地组织并编写可维护的样式代码，在 Next.js 中使用 SCSS 的配置也并不复杂，只需要按照以上三个步骤即可。希望本文能够帮助你更好地使用 SCSS 和 Next.js 进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479d77f968c7c53b05c6fe7