VSCode IntelliSense: How to resolve path aliases in SCSS module imports

Question

In VS Code I would like to be able to jump into other SCSS modules using path aliases as defined in tsconfig.json.

Our Webpack/Vite build setup works fine (e.g. via sass-loader/options/sassOptions/includePaths Webpack config). And I also know in PHP Storm this is possible by setting the given path to resolve as a Resource Directory.

However, so far I was not able to find a setting, a plugin or configuration that could make this work for VS Code IntelliSense.

Folder Structure

• modules
  • components
    • Component.tsx
  • styles
    • styles1.module.scss
    • styles2.module.scss
• tsconfig.json

styles1.module.scss

.class1 {
  display: flex;
}

Component.tsx - Import works fine

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

styles2.module.scss - IntelliSense does not work

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

tsconfig.json

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

Any help appreciated! Thanks.

Mugwump

did you figure out how to solve this? I'm facing the same issue – Sudiesudnor

any luck to solve this? – Carrousel

Answer 1

just use alias-tool and 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}"
    }
}

Elbring

You are awesome. This really works! I don't even need the path-autocomplete extension. I just installed the alias tool extension and added it to my VSCode json config. "alias-tool.mappings": { "@": "${folder}", "@scss": "${folder}/src/scss", "@assets": "${folder}/src/assets", }, – Odum

Answer 2

I try serval ways：

• remove .next and restart server
• remove node_modules and install, restart server
• Finally I just restart vscode and it work.

Girt

url aliases are not exclusive to nextjs – Tweak