VSCode IntelliSense：如何解析 SCSS 模块导入中的路径别名

Question

在 VS Code 中，我希望能够使用 tsconfig.json 中定义的路径别名跳转到其他 SCSS 模块。

我们的 Webpack/Vite 构建设置工作正常（例如通过 sass-loader/options/sassOptions/includePaths Webpack 配置）。我还知道在 PHP Storm 中，可以通过将给定路径设置为资源目录来解析。

但是，到目前为止，我无法找到可以使 VS Code IntelliSense 正常工作的设置、插件或配置。

文件夹结构

• 模块
  • 组件
    • 组件.tsx
  • 样式
    • styles1.module.scss
    • styles2.module.scss
• tsconfig.json

styles1.module.scss

.class1 {
  display: flex;
}

Component.tsx - 导入工作正常

import styles1 from '@/styles/styles1.module.scss'; // import + intellisense works fine
import styles2 from '@/styles/styles2.module.scss';

styles2.module.scss - IntelliSense 可以不起作用

@import '@/styles/styles1.module.scss'; 

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "modules",
    "paths": {
      "@/styles/*": ["styles/*"]
    }
  }
}

感谢任何帮助！谢谢。

Answer 1

只需使用 alias-tool 和路径自动完成

https://marketplace.visualstudio.com/items ?itemName=dgeibi.alias-tool
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

.vscode/settings.json

{
    "alias-tool.mappings": {
        "@": "${folder}"
    },
    "path-autocomplete.pathMappings": {
         "@": "${folder}"
    }
}

Answer 2

我尝试了几种方法：

• 删除.next并重新启动服务器
• 删除node_modules并安装，重新启动服务器
• 最后我重新启动vscode，它就工作了。