Vscode: 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[bot]]

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

[nathanredblur]

Same problem, I would like to know where this filename do the change to add this dash and fix for myself. Looks simple to fix, but I no have any Idea where in the code this thing happen.

[Aliaksei-Martsinkevich]

@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.

[jpidelatorre]

Actually, this is not an error. The service is only following the Sass standard. Partials (files that are imported by other files) are meant to have a filename that starts with an underscore.

From their site:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

To solve it, just use the underscore in the filenames.

[nathanredblur]

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

[jpidelatorre]

Easier but wrong. At best, VS Code should also look for filenames without the underscore.

[Aliaksei-Martsinkevich]

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.

[dizag]

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!

[askfarzad]

please fix it :|

[Spown]

@jpidelatorre you are wrong and you are confusing everyone. Just because underscore _lets_ the file to be recognized as a partial doesn't mean anything else _couldn't_ be partial.

[jpidelatorre]

You are mistaking a partial with an import. You can import any CSS or SCSS
file but that doesn't make them partials.

From the SASS Guide https://sass-lang.com/guide:

You can create partial Sass files that contain little snippets of CSS that
you can include in other Sass files. This is a great way to modularize your
CSS and help keep things easier to maintain. A partial is simply a Sass
file named with a leading underscore. You might name it something like
_partial.scss. The underscore lets Sass know that the file is only a
partial file and that it should not be generated into a CSS file. Sass
partials are used with the @import directive.

[Spown]

ok, that seems to be right. but this issue is not about partials, it' about any kind of file import being treated as partial by path resolver. how is this not an error?

[askfarzad]

if filename has a hyphen and .scss extension then problem solved !

example:

@import "fontawesome/fontawesome.scss";      // Fails
@import "fontawesome/fa-regular.scss";      // Works

[sigo]

@octref could this finally be fixed? 🙁

[Spown]

@askfarzad

problem solved !

Is it? Here is my current solution: don't use follow link on scss files then problem solved! Every time someone finds a "solution" to a problem the devs find a "reason" to push it deeper into the backlog.

[Aliaksei-Martsinkevich]

Also, this "solution" doesn't work either. Filenames with hyphen don't resolve underscore at all.

[proteus-aholt]

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.

[Aliaksei-Martsinkevich]

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

[vedmant]

It also doesn't resolve imports like this:

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

[Canyun]

@import "../../../../node_modules/bootstrap/scss/bootstrap";

I got the same problem.

[nteague22]

So in the above mentioned section where it cuts into a uri, just change
uri.replace(/\/(\w+)(.scss)?$/gm,
to
uri.replace(/\/(\w[\w-_]*)(.scss)?$/gm,
which would insist the filename begin with a word character, but be able top optionally contain dashes and underscores. Or use config for def. of word, similar to other tmLanguage setups

[Fubuchi]

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.

[proteus-aholt]

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

[blackinitial]

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

[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 ~: https://github.com/microsoft/vscode/pull/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]

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.

[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