SCSS auto-suggestion on VS code

Question

I am new to SCSS and have just started a new project, as you can see below I have declared 4 variables in Global.scss but after import it to another scss file, I was unable to get any auto-suggestion as I was assigning those variables.

Am I missing any plugins? Or any other way to solve this?

Biophysics

If you import partials file without underscore _filename.scss sass compile it directly, so you have to need to import partial files with an underscore. Example – Congdon

@Congdon thanks for your reply, I have added _Global.scss now but still there are no auto suggestion from VS code. Any other reason? – Biophysics

If you import the file correctly, variable or any suggestions should be IntelliSense of VS Code or WebStorm IDE features. Install it on vs code – Congdon

Answer 1

Besides SCSS intelliSense, you can also try SCSS Everywhere which gives you suggestions when you are assigning classes to HTML elements.

Obelisk

Great answer (I upvoted). For anyone using SCSS Intellisense VS Code extension, (and using an npm library like @angular/material) you may need to change the settings, specifically the "scss.scannerExclude" settings, to a) remove "*/node_modules" from the list (so *stop excluding node_modules = include it), or b) exclude only certain node_modules from the list, as shown here and kinda shown here. – Chaudoin

Answer 2

Yes, You need to install a vs code extension.SCSS IntelliSense

Installing this extension will show suggestions for variables accessed in a different file.

Coed

Great answer (I upvoted, but it's redundant with the accepted answer, isn't it?). If you use SCSS Intellisense extension, (and using an npm library like @angular/material) you may need to change the settings, specifically the "scss.scannerExclude" settings, to a) remove "*/node_modules" from the list (so *stop excluding node_modules = include it), or b) exclude only certain node_modules from the list, as shown here and kinda shown here. – Chaudoin

@NateAnderson thank you for mentioning scss.scannerExcludes setting. I am evaluating if I need to keep Bulma (scss version) in a project I will work on this coming year. It is a small to medium project (2 GAs and a single programmer). Your setting suggestion goes a long way to me getting rid of an unnecessary framework. – Latinalatinate