vscode can't regonize css nested syntax after using react-css-module with postcss-nested

Question

I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so I'm sure there is no problem with these 2 plugins. But it seems that the vscode can't regonize the css nested rules. It display an underline to give an warning, like this:

Now vscode can't give tips when coding. I have to type the css property names completely. Is there any idea about my problem?

Lexicology

Answer 1

I've also ran into this issue while utilizing nesting. Because nesting is not officially apart of vanilla css VS code is automatically spitting out errors. The best way to fix this issue is to install the VS Code plugin https://marketplace.visualstudio.com/items?itemName=csstools.postcss. this will fix up those nasty little errors. Let me know if that helps you out.

Pearly

Wait, I have found an easy way to solve this. We can select the language pattern in the bottom panel of vscode. By default it is 'CSS' when open a css file. When turning it into 'scss', I found there is no editor warning anymore. Maybe because vscode now treat this css file as a scss file. – Lexicology

But this is not a good idea. I have to change language pattern for each css file. – Lexicology

@Chor, maybe this VS code settings helps preventing that: { "files.associations": { "*.css": "scss" } } – Showman