5

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:

enter image description here

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

Improve this question

1 Answer 1

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
But this is not a good idea. I have to change language pattern for each css file.
@Chor, maybe this VS code settings helps preventing that: { "files.associations": { "*.css": "scss" } }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.