Webpack aliases not working in Karma-webpack

Question

I am getting an error with karma not being able to find modules (scss and images specifically) that are loaded from a webpack alias.

   Error: Module build failed: 
   @import '~Styles/file';
   ^
   File to import not found or unreadable: ~Styles/file.

Webpack devserver and build are able to find these and work great. Karma can load everything else without a problem, it's only the alias files.

webpack.config.js
...
  resolve: {
    alias: {
      Styles: path.resolve(__dirname, 'src/assets/styles'),
...

I've looked over everything related to this that I can find on this site and on google and I haven't come up with a fix yet.

I'm open to using another plugin to sort out aliases with webpack and karma if that will resolve the issue.

Thanks!

Answer 1

In my karma.conf I changed

webpack: webpackConfig

to

webpack: {
      devtool: 'inline-source-map',
      module: webpackConfig.module,
      resolve: webpackConfig.resolve
}

and that fixed the issue. My guess is that there is something extra in the webpack config file that karma didn't like.