Hi, I stumbled on #428 which describes nearly my problem, except that I am already (I think?) specifying an absolute path for the resolve root…
Project structure:
webpack-test/
src/
greeting/
greeting.js
greeting.css
app.js
dist/
node_modules/
webpack.config.js
Import in greeting.js:
import 'greeting.css';
Error message:
ERROR in ./greeting/greeting.js
Module not found: Error: Cannot resolve module ‘greeting.css’ in C:\Users\Stijn\Documents\GitHub\webpack-test/src\greeting
@ ./greeting/greeting.js 15:0-23
The file does exist. In fact, if I copy-paste the path in the error message to a Windows Explorer window, it immediately takes me to the right folder and I see it right there.
Contents of my webpack.config.js:
module.exports = {
context: __dirname + '/src',
entry: {
javascript: './app.js',
},
output: {
filename: 'app.js',
path: __dirname + '/dist',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{test: /\.js$/, include: /src/, loaders: ['react-hot', 'babel-loader']},
{test: /\.css$/, include: /src/, loaders: ['style-loader', 'css-loader']}
]
},
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
resolveLoader: {
root: __dirname + '/node_modules'
}
}
I also tried with a relative import:
import './greeting.css';
But then I get 2 errors that look more difficult… 🙂
ERROR in ./greeting/greeting.css
Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./../../node_modules/css-loader/index.js > in C:\Users\Stijn\Documents\GitHub\webpack-test/src\greeting
@ ./greeting/greeting.css 4:14-82ERROR in ./greeting/greeting.css
Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./../../node_modules/style-loader/addStyles.js in C:\Users\Stijn\Documents\GitHub\webpack-test/src\greeting
@ ./greeting/greeting.css 7:13-71
Any tips for webpack n00b?
you’ll have to use absolute paths in config (e.g. entry points)