11

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?

enter image description here

F. Müller
  • 3,969
  • 8
  • 38
  • 49
Jim_Mcdonalds
  • 426
  • 5
  • 15
  • 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](https://www.w3schools.com/sass/sass_import.asp#:~:text=sass%20or%20.,used%20in%20the%20main%20file.) – Momin Aug 16 '20 at 01:59
  • @Momin thanks for your reply, I have added _Global.scss now but still there are no auto suggestion from VS code. Any other reason? – Jim_Mcdonalds Aug 16 '20 at 02:03
  • If you import the file correctly, variable or any suggestions should be IntelliSense of VS Code or WebStorm IDE features. [Install](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) it on vs code – Momin Aug 16 '20 at 02:06

2 Answers2

12

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

enter image description here

HUGO-DEV
  • 897
  • 8
  • 20
  • 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](https://github.com/mrmlnc/vscode-scss/issues/77#issuecomment-587482478) and kinda shown [here](https://github.com/microsoft/vscode/issues/869#issuecomment-630086813). – Nate Anderson May 26 '23 at 21:25
5

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

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

Muidul Alam 2hin
  • 141
  • 2
  • 9
  • 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](https://github.com/mrmlnc/vscode-scss/issues/77#issuecomment-587482478) and kinda shown [here](https://github.com/microsoft/vscode/issues/869#issuecomment-630086813). – Nate Anderson May 26 '23 at 21:26