Next.js中无法跨文件导入SCSS变量的问题求助

针对你遇到的SCSS变量导入不生效问题，结合你的目录结构（src/app/globals.scss 和 src/styles/variables.scss），这里提供两种可行的解决方式：

方法1：使用@import（无命名空间） #

@import会将变量直接注入当前文件的作用域，不需要额外的命名空间前缀。修改globals.scss代码如下：

@import "../styles/variables.scss";

html,
body {
  background-color: $background;
  color: $foreground;
}

方法2：使用@use（带命名空间） #

@use是SCSS推荐的模块化导入方式，需要通过命名空间访问变量，你可以选择两种写法：

• 指定命名空间（推荐，避免变量冲突）：

@use "../styles/variables.scss" as vars;

html,
body {
  background-color: vars.$background;
  color: vars.$foreground;
}

• 全局引入（省略命名空间）：

@use "../styles/variables.scss" as *;

html,
body {
  background-color: $background;
  color: $foreground;
}

额外检查项 #

1. 确保已安装sass依赖，Next.js需要依赖它处理SCSS文件：
   在项目根目录执行命令：

   npm install sass
   # 或使用yarn
   yarn add sass
   

2. 路径验证：你写的../styles/variables.scss路径是正确的，从src/app目录跳出到src根目录后，可直接进入styles目录访问目标文件。

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