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.

Can you provide your Webpack configuration? What do your imports look like? — Juho Vepsäläinen, May 16 '15 at 04:55
I found same issue. Check out [here](http://stackoverflow.com/questions/41889869/cannot-find-module-css-loader-while-doing-ng-build-prod-with-angular-cli1-0-0/41970682#41970682) — BYUNGJU JIN, Feb 01 '17 at 01:57

score 22 · Answer 1 · answered Jun 05 '15 at 22:51

22

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'),
...

answered Jun 05 '15 at 22:51

Roman D

325
2
4

I had exactly the same issue, and this worked. im guessing it has to do with using the correct path separator for the OS – Sebastian Bender Jun 19 '15 at 12:31
1

Not just for the `context` but `resolve.root` needs to have the proper slashes too. – mpen Mar 13 '16 at 22:40
@roman-d You sir just saved me like a day of debugging, thanks a lot! – Pirozek Sep 14 '16 at 07:06
i have having the same issue. Could you please let me know how to update the below code. const path = require("path"); const dist = path.resolve(__dirname, "dist"); const combineLoaders = require('webpack-combine-loaders'); module.exports = { entry: [ './src/index.js' ], output: { path: __dirname+'/public', publicPath: '/', filename: 'bundle.js' }, – Rakesh Nallam Feb 27 '18 at 08:14

score 2 · Answer 2 · answered May 16 '18 at 16:48

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.

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

2 Answers2