Webpack css-loader cannot find index.js, style-loader cannot find addStyles.js

Question

ERROR in ./app/index.scss Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules css-loader/index.js in C:\Users\johnliang\Temp\webpack-angular/app @ ./app/index.scss 4:14-116 13:2-17:4 14:20-122

ERROR in ./app/index.scss Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules style-loader/addStyles.js in C:\Users\johnliang\Temp\webpack-angular/app @ ./app/index.scss 7:13-68

index.scss is not loaded in the final webpack output.

Answer 1

Be sure you use

path.join(__dirname, 'src')

and not

__dirname + '/src'

in your webpack.config.js:

var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
...

Answer 2

I had a similar issue to this whereby my webpack build was complaining about a .js file:

ERROR in ./node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '/Users/<user>/path/to/project/node_modules/style-loader/lib'
 @ ./node_modules/style-loader/lib/addStyles.js 64:14-31

I must have copied this solution from a tutorial somewhere along the way (or many), but comparing to another project I have written, I realised that I had missed the extension '.js' to the resolve property in my webpack config:

resolve: {
  extensions: [
    '.scss',
    '.css',
    '.js' // <-- HERE
  ]
},

This fixed the issue for me, so definitely give this a go.