VSCode Does Not Auto Complete SCSS Module Imports

[elliott-w]

Bug report

Describe the bug

VSCODE does not provide auto completion for SCSS module imports

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

yarn create next-app (use default and name it 'test-app')
cd test-app
touch tsconfig.json
yarn dev (CTRL+C after first run)
yarn add --dev typescript @types/react @types/node
touch components/Button/index.tsx
touch components/Button/Button.module.scss

Inside components/Button/index.tsx start typing `import './'

Expected behavior

Button.module.scss appears under the auto-complete popup.

Screenshots

Only shows test.tsx

System information

• OS: Windows 10
• Version of Next.js: 9.4.4
• Version of Node.js: v12.16.2
• Version of VSCode: 1.45.1

Additional context

Adding

declare module '*.scss' {
    export const content: { [className: string]: string };
    export default content;
}

to next-env.d.ts does nothing

The 'SCSS Intellisense' vscode extension doesn't do anything either.

[juunzzi]

TT

[juunzzi]

I'm curious too TT

[root5427]

@juunzzi any updates on this? Did you reach expected behavior?

[albertnev]

Same issue, very annoying since SCSS modules are usually the file with the largest name due to the module.scss part addition. Still not any solution?

[Revolt9k]

Any updates?

[TheCodemate]

Any solution for this issue?

[sburgpit]

Still silence ?

[TheCodemate]

Unfortunately the case is not solved. I thought it could be something with webpack... but anyway I havent fixed it

[samik3k]

Yep, im little frustrated when i cant autocomplete .scss module file

[TheCodemate]

That's sad :-( No one knows the answer

[bataevoff]

I am working with webpack and ts and I had the same issue using scss
I have downloaded an extension called "css modules" from vs code extensions store
It solved my problem

[ABC00012345]

same issue :((((