VSCode无法打开无扩展名scss导入路径 如何配置兼容两种写法？

问题表现 #

在VSCode中点击不带扩展名的SCSS导入路径（例如@import '../styles/mixins';）时会弹出无法打开文件的报错，只有写全扩展名的写法@import '../styles/mixins.scss';才能正常跳转打开对应文件。

解决方法 #

方法1：修改内置配置（无需安装扩展） #

可以通过可视化设置或者直接编辑配置JSON实现：

• 可视化操作：打开VSCode设置面板（快捷键Ctrl+,/Cmd+,），搜索SCSS > Resolve: Paths Without Extensions，将对应选项勾选即可
• 手动编辑JSON：按快捷键Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板，输入Preferences: Open Settings (JSON)回车打开配置文件，添加如下规则：

{
  // 保留文件中原有的其他配置项
  "scss.resolvePathsWithoutExtensions": true,
  "files.associations": {
    "*.scss": "scss",
    "*.sass": "sass"
  }
}

保存配置后重启VSCode，两种写法的导入路径就都支持按住Ctrl/Cmd点击正常跳转了。

方法2：安装扩展适配 #

如果修改内置配置后仍存在跳转异常，可以安装对应扩展实现兼容：

• 安装官方Sass扩展：替换VSCode内置的SCSS语言服务，默认支持无后缀导入路径解析，同时兼容标准SCSS语法校验、补全、跳转功能
• 安装SCSS IntelliSense扩展：专门针对SCSS/SASS语法做的功能增强扩展，默认会自动识别导入语句中省略的.scss、.sass后缀，无需额外配置就能同时支持两种写法的路径跳转
• 安装Path IntelliSense扩展：通用路径处理扩展，安装后在设置中开启Path IntelliSense: Extension On Import选项，将.scss加入自动解析的后缀列表，即可实现兼容。

注意：如果项目中使用了Vite、Webpack等构建工具的路径别名配置，需要同步在项目根目录的jsconfig.json或tsconfig.json中配置对应paths映射，否则别名路径的无后缀跳转不会生效。

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