Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 234
John Avatar asked May 15 '15 21:05

John


2 Answers

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'),
...
like image 181
Roman D Avatar answered Nov 17 '22 20:11

Roman D


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.

like image 2
Phil Gibbins Avatar answered Nov 17 '22 19:11

Phil Gibbins