Next.js项目中SCSS无法使用@/绝对导入的问题求助

1. 修正tsconfig.json的路径映射错误 #

你配置的@/styles/*路径指向了项目根目录下的styles/，但变量文件实际位于src/styles/，需调整paths配置：

"paths": {
  "@/*": ["./src/*"],
  "@/styles/*": ["./src/styles/*"],
  "@/components/*": ["./src/components/*"]
}

2. 修正next.config.mjs的includePaths路径与依赖缺失 #

当前includePaths指向根目录的styles/，与实际文件位置不符，且代码未导入path模块会导致运行错误，需修正：

import path from 'path';

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "src/styles/")],
  },
};

export default nextConfig;

3. 验证SCSS导入语法 #

确保SCSS文件中使用正确的绝对导入格式：

// 完整路径写法
@import '@/styles/_variables.scss';

// SCSS部分文件简化写法（可省略下划线与后缀）
@import '@/styles/variables';

4. 清除缓存并重启服务 #

修改配置后，停止开发服务，删除.next和node_modules/.cache目录，再重新启动服务，确保配置生效。

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