VS2022用~导入node_modules的Scss时提示未声明Mixin，如何解决？

当使用带~的作用域包导入语法（如@import '~@my-scoped/package/styles.scss'）时，VS2022无法识别其中的mixin，但Sass编译器能正常编译——这是因为VS的Sass语言服务默认未将node_modules纳入索引路径。以下是几种解决方法：

方法1：配置VS的Sass额外包含路径 #

• 打开VS2022，依次进入工具 > 选项 > 文本编辑器 > CSS > Sass > 高级
• 在额外包含路径输入框中，添加项目的node_modules路径。可以用绝对路径，或者VS内置变量如$(ProjectDir)/node_modules（自动适配项目根目录）
• 保存设置后，VS就能识别~开头的导入，恢复mixin的智能提示

方法2：添加Sass配置文件指定包含路径 #

在项目根目录创建配置文件，让VS读取与编译器一致的路径规则：

• 创建.sassrc文件，写入以下内容：

{
  "includePaths": ["node_modules"]
}

• 或者直接在package.json中添加Sass配置：

{
  "sass": {
    "includePaths": ["node_modules"]
  }
}

• 重启VS2022，语言服务会读取该配置，与Sass编译器的行为对齐

方法3：更新Sass相关插件 #

• 打开扩展 > 管理扩展，搜索并找到你正在使用的Sass语言服务插件（如官方的"Sass"插件）
• 检查是否有版本更新，安装最新版本后重启VS——旧版本可能对作用域包的~语法支持存在缺陷

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