Implicit import finding wrong file

[TzviCons]

I have a file structure with multiple subfolders containing parallel lists of variables for various deployments of my site. The build tool collects and concats the relevant scss and compiles it.

The implicit intellisense however seems to always point to the first instance of any variable. Can a setting be added to offer to point to the closest import rather than the first one found?

This can be reproduced:

deploy_1/variables.scss $var: 1;

deploy_1/more.scss .test {margin: $var_a}

deploy_2/variables.scss $var: 1;

deploy_2/more.scss .test {margin: $var_a}

Ctrl+clicking on $var_a in more.scss in either folder will always point to deploy_1/variables.scss. I would prefer to point to the more.scss in the same folder as the more.scss.

[fgallardograzio]

I'd like to know how this works as well. It looks like it doesn't actually understand sass (as opposed to how typescript intellisense works, for example).

In my experience, it'd seem like it imports and parses every sass file it can find, instead of relying on actual sourcemaps generated by the sass compiler.

To give another example, if you have:

//  main.scss

@import 'vars';
@import 'component';

// _vars.scss

$my-yellow: #ffcc00;

// _component.scss

.my-component {
  background-color: $my-yellow;
}

Then, $my-yellow in the _component.scss partial is considered like a variable defined in an implicit import. You could actually remove the @import 'vars' statement from main.scss, have the build fail but the extension would still find and identify the variable in _component.scss.

This is an awesome extension and, afaik, the best tool for the job we have for VS Code, atm. But I think users would benefit from a more clear explanation regarding how the extension works and what we can expect from it.

More details on how the lookup cache works would be great, too. If it finds a reference in an import, but then you override it in the file you're working, the reference seems to not be updated until you reload VS Code. Perhaps you could expose a "clear cache/reindex" command.

Thanks, @mrmlnc!

[cvgaviao]

I've faced an issue that seems to be related to this one. I've ctrl-click on a mixin from angular material like this one:

$black-warn: mat-palette($mat-red, A200);

And I got this error: Unable to open 'theming.scss': File not found (file:///home/cvgaviao/Development_Angular/testing-angular/node_modules/@angular/material/theming.scss).

[bennyjien]

Would love for this issue to be fixed as well.

I also have multiple files with the same name and variable inside. Even if I explicitly define:

@use "../src/styles/variables" as var;

Clicking on the variable will always point to file implicitly, often to the wrong file.