Ctrl+click (go to file) doesn't work for saas-loader ~ imports (node_modules)

[2-5]

Trying to Ctrl+click on the imported module name fails:

@import '~bootstrap/scss/bootstrap';

with this error:

Unable to open '_bootstrap.scss': File not found (file:///PROJECT/src/styles/~bootstrap/scss/_bootstrap.scss).

The reason is that I'm using webpack with saas-loader, and saas-loader treats an import path starting with ~ as an import from node_modules: https://github.com/webpack-contrib/sass-loader#imports

So the actual location from where the import should be loaded is:

file:///PROJECT/node_modules/bootstrap/scss/_bootstrap.scss

[penx]

@aeschli any thoughts on this?

I would assume, when encountering a path starting with ~, you can revert to node module resolution?

Do you want a more thorough example? Or any pointers on where this could be solved?

FWIW I made css-hyperclick for Atom but have since moved to using VSCode. I'd consider contributing this fix but looks like there may be a learning curve...!

[penx]

From what I can see, findDocumentLinks calls uriStringNodeToDocumentLink:

https://github.com/Microsoft/vscode-css-languageservice/blob/69884c1d4cd5bf96de71b576587667853600bd50/src/services/cssNavigation.ts#L236
...
https://github.com/Microsoft/vscode-css-languageservice/blob/69884c1d4cd5bf96de71b576587667853600bd50/src/services/cssNavigation.ts#L262-L271

which calls resolveReference here:

vscode/extensions/css-language-features/server/src/utils/documentContext.ts

So I think we'd need to hand over to node module resolution in one of these files. I think at the start of documentContext's resolveReference function,

if (ref[0] === '~' && ref[1] !== '/') {
  return require.resolve(ref.substring(1))

It would be good to see how this is being handled for resolveReference in typescript/javascript and use the same technique - as far as I can see it uses require.resolve:

https://github.com/Microsoft/vscode-languageserver-node/blob/dbfd37e35953ad0ee14c4eeced8cfbc41697b47e/server/src/resolve.ts#L17-L24

[penx]

Related:

Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import

@import "~bootstrap/dist/css/bootstrap";

https://github.com/webpack-contrib/sass-loader#imports

[penx]

I have this working and have opened a PR microsoft/vscode#70693

[penx]

@aeschli any chance of some input on the PR for this? Has been open more than 3 weeks.

microsoft/vscode#70693

Thanks!

[penx]

@aeschli there are still issues with this, please see my comment on microsoft/vscode#70693 (comment)

Maybe we can reopen this or I can open a new issue if you'd prefer?

[aeschli]

Let's create a new issue...