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

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:

Have a node modulle, like node_modules/bootstrap, installed
Import a sassfile from this module, like @import '~bootstrap/scss/bootstrap-grid';
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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 13
Comments: 32 (27 by maintainers)

Commits related to this issue

Search in parent folders for node module resolution as per comments from @octref on #78894 https://github.com/microsoft/vscode/issues/78894#issuecomment-535254539 — committed to penx/vscode by penx 5 years ago
#78894 failing test — committed to microsoft/vscode by penx 4 years ago
Search in parent folders for node module resolution as per comments from @octref on #78894 https://github.com/microsoft/vscode/issues/78894#issuecomment-535254539 — committed to vscode-langservers/vscode-css-languageserver by penx 5 years ago

Most upvoted comments

@roblourens that’s odd… for me the relative links do properly linkify.

JacksonKearl on Jun 5, 2020

Stop here, even though require would try /foo/node_modules/boostrap/something.css, we don’t reach outside your workspace.

I think you mean /node_modules/bootstrap/something.css in that example.

InDieTasten on Sep 26, 2019

I propose that we don’t add one-liner dependencies to just bypass webpack.

Does doing it this way work for your cases?

Find filepath
Find workspace folder path
For each folder along the way, determine if node_modules/<module-name> exists
If so resolve into it

For example, if you have /foo/bar/baz.js and your workspace folder is /foo, and you are requiring ~bootstrap/something.css, it would try:

/foo/bar/node_modules/boostrap/something.css
/foo/node_modules/boostrap/something.css
Stop here, even though require would try /node_modules/boostrap/something.css, we don’t reach outside your workspace.

octref on Sep 26, 2019

It would go into extension.webpack.config.js. Example:

externals: {
			'vscode': 'commonjs vscode', // ignored because it doesn't exist
		},

aeschli on Aug 22, 2019

webpack is probably the best packager out there. For browsers and also for commonjs. It’s a pity that its so restrictive with require as it I could really allow require.resolve(module, {path: [...]})

is it possible to write helper functions in part of the vscode that is not being webpacked

In the webpack.config.js you set a list of node modules that should not be bundled but just required.

Alternative is to reimplement the require lookup. I think that’s the typescript language server does: https://github.com/microsoft/TypeScript/blob/01e1b1bb276f48eaa0612a34dd8f1eec5d86bd49/src/compiler/moduleNameResolver.ts

aeschli on Aug 22, 2019