在前端开发中，CSS 预处理器已成为必不可少的工具之一。而 Next.js 作为一个流行的 React 服务器端渲染框架，也提供了支持 CSS 预处理器的能力，其中包括 SCSS。本文将会讲解如何在 Next.js 中配置 SCSS 全局变量，帮助你更好地管理项目中的 SCSS 样式文件。
准备工作
在开始配置之前，确保你已经安装了 Next.js 和 SCSS 的依赖包。如果没有，可以通过以下命令进行安装：
npm install next@latest sass
配置 SCSS 全局变量
首先，我们需要在项目中新增一个 styles 文件夹，用于存放全局的 SCSS 变量和样式文件。在该文件夹下，新建一个名为 _variables.scss 的文件，用于定义全局变量，例如：
$primary-color: #1890ff; // 主色调 $secondary-color: #fadb14; // 次要色调
接下来，在 Next.js 的配置文件 next.config.js 中，我们需要添加一个插件来处理 SCSS 文件。找到 modules.exports，新增以下代码：
-- -------------------- ---- -------
----- -------- - ---------------------------
-------------- - ----------
----------- -----
----------------- -
-------------- --
--------------- ----------------------------
--
------------------ -
------------- ----------
-
---上述配置中，我们引入了 @zeit/next-sass 包，并设置 cssModules 为 true，以启用 CSS 模块化。同时，我们指定了 localIdentName，用于自定义生成的类名。在 sassLoaderOptions 中，我们设置 includePaths: ["styles"]，使 styles 文件夹成为了 SCSS 文件的导入路径。
使用 SCSS 全局变量
在完善了全局变量以及配置文件之后，我们可以在项目中任何需要的地方使用所定义的全局变量。例如，在一个 components/Button 组件中，我们可以这样来使用：
import styles from './Button.module.scss';
const Button = () => (
<button className={styles.button}>
点我啊~
</button>
);其中，我们定义了一个名为 button 的全局样式类，并将其引入到了该组件中。样式类的定义方式如下：
-- -------------------- ---- -------
------- -
----------------- ---------------
------ -----
---------- -----
-------- ----- -----
------- -----
-------------- ----
------- --------
----------- --- ------------
------- -
----------------- -----------------
-
-在组件中，styles 对象包含了样式类的映射关系。我们可以使用该对象来获取全局样式类的类名，从而实现样式的导入。在 React 组件中，我们只需要将类名添加到相关的标签上即可。
总结
在本文中，我们了解了如何在 Next.js 中配置 SCSS 全局变量。通过添加插件和设置 Sass 配置项，我们可以在项目中方便地使用全局变量。在组件中，我们可以通过生成的类名来使用全局样式类，并将其导入到相应的 JSX 标签中。希望本文能够对你在 Next.js 项目中使用 SCSS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0738ab5eee0b525768c9f