The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root".
So i did as it tells, I have my index.html in my project root, then I'm trying to load an image from my scss file.
Now I have 2 errors: 1) from Chrome's console: Cannot find module "./img/header.jpg". 2) from my terminal:
ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:Web-DevelopmentReactPortfoliopubliccss
@ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91
webpack.config.js
module.exports = {
entry: './main.jsx',
output: {
filename: './public/js/build/bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
},
{
test: /.scss$/,
loaders: ["style", "css", "sass", "resolve-url"]
},
{
test: /.jpg$/,
loader: "file?name=[path][name].[ext]"
}
]
}
};
If I see my code, I can clearly see that my css lives inside <head> so I've pointed my image's path to my root, as documentation says, but still can't fix it.
UPDATE:
I've installed file-loader and followed the instructions, now I get this error in console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
