How to make VSCode CSS file extensions understand PostCSS code using files.association!
Have your PostCSS linted correctly in a .CSS file
TLDR: To have your css files that have PostCSS code linted correctly, inside of your settings.json file, paste the code below anywhere in the settings.json file.
To get to your settings.json file, on mac type: shift +cmd + p (on windows its shift + ctrl + p) which opens the command palette at the top of VSCode. Then type settings into the command palette, the box should look like >settings. You should now have in your drop down an option for “Preferences: Open Settings (JSON)”, if you click on this, you should be inside of the settings.json file.
The “files.associations” key uses the coding language identifiers inside of VSCode to associate your css files with the scss programming language. This coding language identifier can also be used for file types that are not recognized at all. This blog post on how to Associate File Types in VS Code by John Papa goes over using the language identifiers to format a .vuerc file.
Associating Your SCSS files with the CSS extension
In some cases you might want to do the inverse and tell VSCode to have your .scss file extensions to be read as .css. To do this you go back into your settings.json file.
Compiling your SCSS, SASS, or LESS into CSS
Compiling your SCSS, SASS, or LESS into CSS is a much more complicated process. You would need either a plugin or have to set up an automated system with a package manager like Gulp, NPM, etc. For plugings there are multiple VSCode plugins, but the one that pops up most frequently is the live Sass compiler. VSCode also points you to multiple plugin options for CSS formatting in general.
For setting up auto-compiling in NPM, the main package used right now is PostCSS. I would recommend looking up a tutorial on setting up PostCSS in NPM to get a sense of the full structure and terminal commands you will need.