sass-loader: In 2.0.0+ importing using `~module` is unable to resolve

Before upgrading to 2.0.0+, I was using some imports like the following:

@import '~config';

According to the documentation, this should tell sass-loader to have webpack resolve these paths using modulesDirectories:

Just prepend them with a ~ which tells webpack to look-up the modulesDirectories.

This was working great for me, but when I upgrade to 2.0.0 or 2.0.1, I get the following error when webpack runs:

Module build failed:
@import '~config';
       ^
      File to import not found or unreadable: ~config

Is there a new way I should be doing this, or is this feature no longer supported as of 2.0.0?

Thanks!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

resolve.modulesDirectories should only contain folder names, no actual paths. Webpack applies node’s resolving algorithm with these folder names. It walks up the directories and tries each folder name:

a/b/node_modules
a/node_modules
node_modules

What you probably want is resolve.root (which takes absolute paths!).

Btw: That’s why bower_components should be listed as resolve.root instead of modulesDirectories

Please set up a small example repo (using resolve.root) which demonstrates the problem. It makes debugging at lot of easier for me and it may help you pinning down the problem, if it’s in your configuration.

jhnns on Nov 17, 2015

This actually works for me on OSX, but fails on linux.

mako-taco on Oct 20, 2015