Skip to content

[scss] link doesn't work with ~Tilde to search in node module or webpack alias #78894

@Friksel

Description

@Friksel

Using a **~**Tilde to go directly to a node_module path without having to add aliases to webpack this path doesn't get resolved by VS Code.

So with a node_module 'bootstrap' installed, we can import bootstrap sass-files using this construction:

@import '~bootstrap/scss/bootstrap-grid';
@import '~bootstrap/scss/utilities/sizing';

While this is working fine with Webpack and the sass-loader/node_sass, VS Code doesn't recognise this tilde-construction and searches on a follow-link in our source-folder\bootstrap\ instead of in node_modules\bootstrap\

When we use aliases in Javascript we solved his resolve problem by adding aliases to the jsconfig.json. But AFAIK there's not such a config file for Sass in VS Code.
I've been searching everywhere, including settings on sass, but couldn't find anything where we could make VS Code respect the node_modules path (and Webpack aliases) with a tilde~.

So unfortunately we seem to not being able to click to follow link on these sass imports.

versions

  • VSCode Version: 1.37.0
  • OS Version: Windows 10 Home Updated

Steps to Reproduce:

  1. Have a node modulle, like node_modules/bootstrap, installed
  2. Import a sassfile from this module, like @import '~bootstrap/scss/bootstrap-grid';
  3. Ctrl+click on the import line to try to 'Follow Link'
    Result: it shows an error-message popup saying 'Unable to open' with the wrong path

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

Metadata

Metadata

Assignees

Labels

css-less-scssIssues and items concerning CSS,Less,SCSS stylingfeature-requestRequest for new features or functionalityverification-neededVerification of issue is requestedverifiedVerification succeeded

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions