如何解决Next.js（T3 Stack）中SASS Legacy JS API弃用警告？

关于屏蔽警告与升级风险 #

• 屏蔽警告确实只是权宜之计，无法解决根本问题。Sass 2.0已完全移除Legacy JS API，未来依赖该旧API的代码或工具必然会直接崩溃，绝非推迟问题爆发这么简单。
• 若当前直接升级到Sass 2.0，仍使用@import或依赖旧JS API的代码大概率会直接崩溃，因为旧API已被彻底移除，无兼容空间。

Next.js（T3 Stack）配置修正 #

你之前的配置错误在于Next.js的sassOptions结构不正确，正确的配置方式是直接在sassOptions层级指定api参数，无需嵌套preprocessorOptions：

/** @type {import("next").NextConfig} */
const config = {
  sassOptions: {
    api: "modern", // 也可指定为 "modern-compiler"
  },
};

export default config;

T3 Stack的配置文件通常为next.config.mjs或next.config.js，直接修改该文件即可，无需调整tRPC、Prisma等其他T3相关配置。

从@import到@use/@forward的重构步骤（避免崩溃） #

直接全局替换@import会导致崩溃，因为两者的作用域、变量引用逻辑完全不同，需按以下步骤逐步迁移：

1. 先处理全局样式文件

   • 对globals.scss这类全局样式，将@import改为@use，注意@use引入的变量默认带文件名命名空间，可临时用as *取消命名空间（仅作过渡，不推荐长期使用）：

     // 旧写法
     @import "./variables";
     .button { color: $primary; }
     
     // 过渡写法（减少代码修改量）
     @use "./variables" as *;
     .button { color: $primary; }
     
     // 规范写法
     @use "./variables" as vars;
     .button { color: vars.$primary; }
     

2. 处理组件内的样式导入

   • 组件局部样式避免重复导入全局变量，可通过@forward将全局变量转发到组件样式：

     // styles/_variables.scss（全局变量文件）
     $primary: #2563eb;
     
     // styles/_index.scss（转发入口）
     @forward "./variables";
     
     // 组件内样式文件
     @use "../styles";
     .component { color: styles.$primary; }
     

3. 处理第三方依赖的@import

   • 若使用的UI库或第三方插件仍在使用@import，无需自行修改，等待库方更新即可；若为自研依赖，同步改为@use规范。

4. 分步测试调试

   • 每次修改一个文件后启动开发服务器，针对性排查报错：
     • 变量未找到：检查命名空间是否正确
     • 混合器(Mixin)未找到：需通过命名空间调用，如@include vars.mixin-name()

额外注意事项 #

• 确保sass版本为2.0+，可通过npm list sass或yarn list sass确认版本，低于2.0则执行npm install sass@latest升级
• Next.js的CSS Modules与@use的命名空间互不冲突，可正常共存

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