NextJs 14.2（App Router）全局SCSS变量无法访问问题求助

核心原因 #

Sass变量属于预编译层面的变量，每个.scss（包括.module.scss）文件都是独立编译的，不会自动共享全局样式文件中的变量。而CSS变量是浏览器运行时的全局变量，只要在全局样式中定义，所有样式文件都能通过var(--x)访问，这就是两者的本质区别。

解决方案 #

方案1：手动导入变量文件 #

把全局变量单独抽离成一个Sass partial文件（以下划线开头，比如_variables.scss），避免被编译为独立的CSS文件：

// src/app/_variables.scss
$x: #ff0000;

然后在global.scss中导入这个变量文件，保留全局样式：

// src/app/global.scss
@import "./_variables.scss";

// 其他全局样式
body {
  margin: 0;
}

在需要使用变量的.module.scss文件中，手动导入变量文件：

// src/app/page.module.scss
@import "@/app/_variables.scss";

.container {
  color: $x;
}

方案2：配置Next.js自动导入变量（推荐） #

在next.config.js中添加sassOptions配置，让所有.scss文件自动导入变量文件，无需手动写@import：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `@import "@/app/_variables.scss";`,
  },
};

module.exports = nextConfig;

这里的@是Next.js默认的src目录别名，确保变量文件路径正确。配置后，所有.scss和.module.scss文件都会自动加载_variables.scss中的变量，直接使用即可。

关键注意事项 #

• 不要直接在.module.scss中导入整个global.scss，否则会重复编译全局样式，导致样式冗余。
• Sass partial文件（下划线开头）不会被Next.js单独编译为CSS，仅作为变量或混合宏的载体使用。

内容的提问来源于stack exchange，提问作者ig22