Next.JS：使用全局 scss 中的 SASS 变量

CSS

使用全局 SCSS 中的 SASS 变量是在 Next.JS 中定制化样式的一种常见需求。在本篇文章中，我们将介绍如何在 Next.JS 中配置全局 SCSS，并使用 SASS 变量来简化样式的管理和修改。

首先，我们需要在项目中安装相关的依赖。打开终端，进入项目目录，并执行以下命令：

bash
npm install node-sass@4.14.1
npm install sass-loader@10.1.1

安装完成后，我们需要在 Next.JS 中配置 SCSS 的支持。打开项目根目录下的 next.config.JS 文件，如果该文件不存在，则新建一个。在文件中添加以下代码：

Javascript
module.exports = {
  // ...其他配置
  webpack: (config) => {
    config.module.rules.push({
      test: /\.sCSS$/,
      use: [
        'style-loader',
        'CSS-loader',
        'sass-loader'
      ]
    })
    return config
  }
}

这段代码的作用是配置 webpack，使其能够解析 SCSS 文件。其中，style-loader 将样式注入到页面中，CSS-loader 将 CSS 转换成模块，sass-loader 将 SCSS 转换成 CSS。

完成以上配置后，我们可以在项目中创建全局的 SCSS 文件。在项目根目录下创建一个名为 globals.sCSS 的文件，并在其中定义一些全局的 SASS 变量，例如：

sCSS
$primary-color: #ff0000;
$secondary-color: #00ff00;

在需要使用这些变量的组件中，我们可以通过导入 globals.sCSS 文件来引入这些变量。例如，在某个组件的样式文件中，可以这样写：

sCSS
@import '../../globals.sCSS';
.button {
  background-color: $primary-color;
  color: $secondary-color;
}

这样，我们就可以在样式中使用定义好的 SASS 变量了。当需要修改全局的颜色或其他样式时，只需要修改 globals.sCSS 文件中的变量值，即可自动应用到所有使用了这些变量的组件中。

案例代码：

Javascript
// next.config.JS
module.exports = {
  // ...其他配置
  webpack: (config) => {
    config.module.rules.push({
      test: /\.sCSS$/,
      use: [
        'style-loader',
        'CSS-loader',
        'sass-loader'
      ]
    })
    return config
  }
}

sCSS
// globals.sCSS
$primary-color: #ff0000;
$secondary-color: #00ff00;

sCSS
// button.sCSS
@import '../../globals.sCSS';
.button {
  background-color: $primary-color;
  color: $secondary-color;
}

在这个案例中，我们首先在 next.config.JS 文件中配置了 SCSS 的支持。然后，我们在 globals.sCSS 文件中定义了两个全局的 SASS 变量。最后，在 button.sCSS 文件中，我们引入了 globals.sCSS 文件，并使用定义好的变量来设置按钮的背景颜色和文字颜色。

通过这种方式，我们可以方便地管理和修改全局样式，而不需要逐个修改组件的样式文件。这在大型项目中尤为重要，可以提高效率并保持样式的一致性。

使用全局 SCSS 中的 SASS 变量是一个简化样式管理的好方法。在 Next.JS 中配置全局 SCSS 需要安装相关依赖，并在 next.config.JS 文件中进行配置。然后，我们可以在全局的 SCSS 文件中定义变量，并在需要的组件中引入这些变量。这样，我们就可以轻松地管理和修改全局样式，提高开发效率和样式的一致性。