CODEWITHSUNDEEP
csstypescriptvisual-studio-codesassintellisense
Tris
Tris

Reputation: 191

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

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

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.

VS Code IntelliSense Error

Upvotes: 12

Views: 4016

Answers (2)

Jiabin Peng
Jiabin Peng

Reputation: 71

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

Upvotes: 7

yuting kuang
yuting kuang

Reputation: 77

I try serval ways：

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

Upvotes: -2

Related Questions