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

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)

please fix it 😐

(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)

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.

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.

@Fubuchi that extension does not work as a work-around. I have that extension installed and it doesn’t help for alleviating this issue.

i seem to be having the opposite problem.

my scss:

@import "../config/base-import";

my filename:

_base-import.scss

error:

Unable to open 'base-import': File not found (file:///c:/Users/<redacted>/<redacted>/web/src/stylesheets/<redacted>/default/config/base-import).

notice, the _ is not being added as it should be.

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

Currently, use this extension as a work-around : https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss

It can jump to variable in other files.

Not only partials allowed to be imported From sass documentation

Sass extends the CSS @import rule to allow it to import SCSS and Sass files. Import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file’s extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries. If none of the above conditions are met and the extension is .scss or .sass, then the named Sass or SCSS file will be imported. If there is no extension, Sass will try to find a file with that name and the .scss or .sass extension and import it.

For example,

@import "foo.scss"; or @import "foo"; would both import the file foo.scss

Partials are only special case of imports:

Partials If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

@nathanredblur It seems that problem is in this function: toScssPartialUri As I’ve mentioned in my duplicate of this issue #65078, behavior is different, when “-” symbol is present in file name. And this regex /\/(\w+)(.scss)?$/gm only accepts letters.

https://github.com/microsoft/vscode-css-languageservice/pull/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.

@vedmant There’s now (some) support for paths starting with ~: https://github.com/microsoft/vscode/pull/70693

@octref could this finally be fixed? 🙁

ok, I understand the point, but will be easier just let vcode read the filename exactly how it is.

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

still listening this issue -_-

i was import bem-constructor @import 'bem-constructor';

my file name _bem-constructor.scss

get an error Unable to open 'bem-constructor': File not found (file:///home//www/template/src/sass/bem-constructor).

That’s because of dash “-”. There us an issue in regex, any non letter symbol in filename breaks resolver

nop isn’t fixed, in insider linux version didn’t work. If file is _varables.scss, editor look for __varables.scss … it’s more than boring!

@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

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 ?