SCSS follow link resolves wrong path (prefixes base with underscore)

[Spown]

• VSCode Version: 1.27.1
• OS Version: Win10x64

Steps to Reproduce:

Does this issue occur when all extensions are disabled?: Yes
Insiders?: Yes

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• SCM add autocompleete to comment input. (#40842)

[octref]

I'm guessing the file you are working on is located at /static/css, is that correct? Can you run a tree command at the folder and selectively paste useful information here?

[Spown]

correct

[project_root]/static/css
│   admin.css 
│   admin.scss //<-main import entry point, compiles
│   style.css
│   style.scss
│
├───maps
│       admin.css.map
│       style.css.map
│
├───mixins //<-imports, not compiled on itself
│   │   common.scss
│   │   filemanager.scss
│   │   flash_messages.scss
│   │   fonts.scss
│   │   lang_switcher.scss
│   │   list_table.scss
│   │   native.scss
│   │   reset.scss
│   │   scrollbar.scss
│   │   slick-theme.scss
│   │   slick.scss
│   │   unique.scss
│   │   variables.scss
│   │
│   └───scrollbar
│           mixins.scss
│           themes.scss
│           variables.scss
│
└───views
        admin__work_add_edit.scss

[octref]

I see, in SCSS you don't have to put an underscore before the filename for it to not compile...

[Spown]

I can't say for every scss compiler tool. maybe some has this convention and act upon it by default. I use gulp-sass which I explicitly tell to compile "./static/css/*.scss" so it doesn't go in the subfolders

[GrimLink]

This error also happens when you leave out the file type.
The name must be exact to its file name.
This makes sense for most cases.
But not for scss files, since the import statement does not required the file type and the underscore.

Example:
file: _card.scss

@import "card"; // Fails
@import "_card"; // Fails
@import "card.scss"; // Fails
@import "_card.scss"; // Works

@octref & @Spown the underscore is purely for scss files that are imported via an scss file.
It is a best practice to use it when the scss file is not outputted to a css file.
Most compilers will convert the scss file without one to a css file.

[octref]

I see. And during my testing, unless you specifically specify card.css, SCSS resolves card to card.scss when there are both card.css and card.scss.

[octref]

@aeschli Do you have any suggestions as to how to do this in service?

• @import "card.scss" might be importing either card.scss or _card.scss
• I need to use fs to check which one the import resolves to, but fs is not available in service

[Spown]

I personally don't understand why the service even needs to guess anything. Follow link is being supplied an definite path from the file source.

[octref]

@Spown The service is used in Monaco too, which can be used in browser that doesn't have file system access: https://microsoft.github.io/monaco-editor/playground.html.

[aeschli]

@octref we could add something like a file system provider that we initialise the service with.
With that service we could also move path completion to the service.

[octref]

Moving to October since introducing a FS Provider to the Language Service is more work.

[Mushr0000m]

Same problem for me, I have a master.scss that only does multiples@import "...", the autocompletion works but the go to click doesn't. The most weird part is that it works in some case and not in others :

• @import "components/header.scss" => Works
• @import "pages/home.scss" => Works
• @import "base/icons.scss" => Doesn't work, it tries to find base/_icons.scss. For everything inside my base folder when I try to use the go to on click it search for the file with the underscore name....

Is there any way to make it just go to what is written, just follow the path in any case ?

[andremacola]

Another simple problem in VSCode that is not fixed by the team.
VSCode need a task force for several small big problems in the editor.

[ericmorand]

It also doesn't resolve imports like this:

@import '~font-awesome/scss/font-awesome';

Which is normal since it is by no mean part of SASS specifications.

[ericmorand]

Is there an alternative extension available? This makes Visual Code useless for frontend developers.

[proteus-aholt]

Is there an alternative extension available? This makes Visual Code useless for frontend developers.

that seems like a stretch. VSCode is by no means useless for frontend developers with this bug.

Lets try to keep the hyperbole down to a believable level. Is the bug annoying? yes. Can it be worked around? also yes. Ctrl + P then type in the file name.

I would be awesome if this were fixed, though, as it is a major annoyance at the very least.

[vedmant]

Also important one is to fix "~" as a node_modules shortcut, it doesn't resolve paths like @import '~font-awesome/scss/font-awesome';

[aeschli]

@vedmant There's now (some) support for paths starting with ~: #70693

[BPScott]

In case anybody is looking to implement, here's the spec for resolving @imports in sass: https://github.com/sass/sass/blob/master/spec/at-rules/import.md

[BPScott]

microsoft/vscode-css-languageservice#159 should fix the inconsistency where @import './foobar' resolves to to _foobar.scss while @import './foo-bar resolves to foo-bar. Once that is merged then filenames containing non-alphanumeric charachers (like hypens) shall also be prefixed with an underscore and get their extension too.

It doesn't solve the underlying problem of VScode assuming the convention of "Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss)" rather than following the import spec but at least it makes that behaviour more consistent.

[octref]

I'll fix this with a dynamic resolver. Previously there's no fs access from css language service, as it needs to be usable in Monaco.

Here's my plan:

• The - causing inconsistent behavior is a bug. I'll fix that with @BPScott's PR.
• a could resolve to either a.scss, _a.scss or a/index.scss or a/_index.scss (dynamic link)
• _a could only resolve to _a.scss (static link)
• When using imports with suffix, such as a.scss or a.css, resolve without guessing the alternative such as _a.scss (static link)

[ericmorand]

Is "a could resolve to either a.scss, _a.scss or a/index.scss or a/_index.scss (dynamic link)" part of SASS specifications?

[kasvtv]

I still can't get SCSS referencing to work after the update. It's true that it no longer requires an underscore in front of the filename, but absolute imports only work if prepended by a slash, however that tends not to compile with webpack's sass-loader.

[octref]

@kasvtv Please post new issues with full reproducible steps.

[ericmorand]

@kasvtv then it's an issue with sass-loader, isn't it? Absolute import in SASS requires the forward slash, it's in the CSS specs that SASS conforms to.

@import "foo"; is relative and same as @import "./foo";
@import "/foo"; is absolute