Resolving `@import` to scoped npm packages

[segfaultmedaddy]

As continue of issue #382 there is a problem in sass-loader or webpack with resolving .scss files in
scoped npm packages (node_modules/@org/pkg) if there no explicit importing path, sass-loader will
not recognize package in node_modules and throw File to import not found or unreadable: ... error. Also, to note there is no error when using simply css-loader to resolve .css files.
See example: https://github.com/vanesyan/webpack-npm-scope-css-import-issue

[demiters]

I am having the same problem trying to @import 'material-components-web' which would work if the package name was prefixed with tilde (~), however the Sass file in the package also internally imports from its own @material/... packages without the tilde so I have no idea how to make Webpack/sass-loader deal with that?

[segfaultmedaddy]

@demiters but issue persists also if I prefix import path with tilde ~, see example repo. by the link above.

[jhnns]

Thanks for providing that example. I'll take a look.

[segfaultmedaddy]

Any updates on the thread?

[chikamichi]

Don't know if that could be the underlying issue, but it has to be just ~, not ~/:

// NOK:
@import '~/@org/pkg';

// OK:
@import '~@org/pkg/';

[segfaultmedaddy]

@chikamichi as you can see in example I've provided there's the second form (from which you showed) of importing statement is in use (i.e. @import "~@org/pkg").

[chikamichi]

I thought you had indeed, but wanted to make it explicit just for clarification.

I'm using sass-loader to @import chunks of an npm-installed inuitcss build which bundles .scss files and it works flawlessly. Fixing the paths to abide by Webpack's ~ convention was all I needed to make it work. Therefore could something else beyond path scheme be wrong in your setup?

[segfaultmedaddy]

Issue specifically appears for resolving imports from npm organization packages. Inuitcss doesn't bundle any packages from organization (~@org/pkg), inside it. And itself it's named inuitcss on npm.

[westhechiang]

This is exactly the problem that I am running into when trying to use sass-loader with eyeglass. We bundle our packages from our org. I get a compile error:

File to import not found or unreadable:  @eg-modules-header

I've been banging my head against this for the better part of this week so any insights would be extremely helpful!

[segfaultmedaddy]

@westhechiang As workaround you can set the path to importing file directly in @import rule, e.g.:

@import "~@foo/bar.scss";

Note the bar.scss at the end of the importing rule.

[alexander-akait]

@vanesyan In your example (https://github.com/vanesyan/webpack-npm-scope-css-import-issue), "~@foo/bar.scss" don't exists use "~@foo/bar/index". If your want to support main field in package.json please create separately issue.

[segfaultmedaddy]

The issue exactly was subjected to the main field in package.json. Importing from general npm package honors it, but not from organization package.

[alexander-akait]

@vanesyan webpack by default support main field in package.json.