Getting VSCode Go-To (Ctrl+Click) to work with CSS modules

[sveinnthorarins]

I'm working on a typescript project with Vite.

I'm importing a CSS Module like so:

import styles from './Component.module.scss';

Somehow Vite's CSS module typings take over the intellisense functionality of VSCode.

So when I ctrl+click to open the .scss file, I instead open Vite's client.d.ts.

Is there any way to get this working correctly?

[Sodj]

Same here, it should open the css file at the clicked class position

[volarname]

same issue here, any solution?

[alfredomtzrmz]

same here, not solution yet?

[mbritton]

Experiencing the same issue. Mac M1, VS Code 1.72.2 Universal

[strlns]

I could resolve this in a react toy project by adding React CSS modules too. Haven't reviewed the code and currently both extensions installed so try at your own risk.

[pramancodes]

you saved my day!!

[doggen999]

React CSS modules works like a charm (so far, 2 minutes into use)!

Adds a really nice lint-feature of highlighting any classnames using a selector not implemented in the style-file, with a quick fix of adding the selector in the style.module.scss. Great work!

[strlns]

👍 The author is on GitHub and the extension is in active development
https://github.com/Viijay-Kr/react-ts-css

[movahhedi]

Highly recommend using typescript-plugin-css-modules.

[Stan-Stani]

Anecdotal experience, (not using Vite but Next.js w/ turbopack) but https://github.com/Viijay-Kr/react-ts-css worked better than typescript-plugin-css-modules for us. Hover defs and flagging non-existant selectors worked with Viijay-Kr's extension but not with the other one for us.

[dezmou]

Having trouble with React CSS Module, it slow down file saving by multiple second.
Don't know if it is because I work with WSL2 or if I have a lot of project opened on the same windows.

This extension does the trick for me
https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules