resolve aliases in @import work during initial compile but error out during recompiles

I have the following alias in my webpack config:

  resolve: {
    alias: {
      'mindfront-react-components': path.join(__dirname, '../mindfront-react-components'),
    }
  }

I have a sass file using this alias:

@import mindfront-react-components/css3-mixins

When I start up webpack-dev-server for the first time, the sass file compiles just fine. But if I make any changes to it, I get the following error when webpack-dev-server recompiles:

ERROR in ./~/css-loader!./~/sass-loader?indentedSyntax&outputStyle=expanded!./app/components/InventoryList.sass
Module build failed: 
@import mindfront-react-components/css3-mixins
       ^
      File to import not found or unreadable: mindfront-react-components/css3-mixins
      in /home/andy/jcore-portal/app/components/InventoryList.sass (line 1, column 9)
 @ ./app/components/InventoryList.sass 4:14-166 14:20-172

[e110c0]

it looks like a similar issue here with webpack 2:

alias: {
Styles:     path.resolve(__dirname, 'styles')
}

when I import in a sass file like this:

@import 'Styles/imports'; compile works, but the file imports is not watched.

@import '../../../styles/imports';

compile and watch works.

If found in webpack 1 configs that the import should use ~:

@import '~Styles/imports';

this also works for compile and watch. It looks like @import 'Styles/imports'; is not adding the files to the dependency tree for some reason.

[alexander-akait]

Duplicate https://github.com/webpack-contrib/sass-loader/issues/410, If somebody don’t agree please create a separate issue. Thanks for helping sass-loader doing better 👍