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.
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'),
...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With