css - VSCode 智能感知：如何在 SCSS 模块导入中解析路径别名

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

我们的 Webpack/Vite 构建设置工作正常（例如，通过 sass-loader/options/sassOptions/includePaths Webpack 配置）。我也知道在 PHP Storm 中，这是可以通过将给定路径设置为 Resource Directory 来解决的。

然而，到目前为止，我还没有找到能够让 VS Code IntelliSense 工作的设置、插件或配置。

文件夹结构

• 模块

  • 组件

    • 组件.tsx
    • 组件
    • Component.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/*"]
    }
  }
}

任何帮助都感激！谢谢。

答案＃1

只需使用 alias-tool 和 Path Autocomplete

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}"
    }
}

答案＃2

我尝试了几种方法：

• 删除 .next 并重启服务器
• 删除 node_modules 并重新安装，然后重启服务器
• 最后我只是重启了 VSCode，然后它就可以用了。