I can't import background image through scss file in my react project using webpack. I followed all the recent advice on stackexchange but to no avail. I get this error message when I try to import images through either scss or css files:
Module not found: Error: Can't resolve 'marker.svg'
in the scss file
.marker {
background-image: url('./marker.svg');
scss config in webpack
{
test: /\.s[ac]ss$/,
use: [{
loader: 'style-loader',
options: { sourceMap: IS_DEV }
}, {
loader: 'css-loader',
options: {
localIdentName: '[hash:base64:5]',
modules: true,
sourceMap: IS_DEV
}
}, {
loader: 'postcss-loader',
options: { sourceMap: IS_DEV }
}, {
loader: 'sass-loader',
options: {
sourceMap: IS_DEV,
}
}]
},
image config in webpack
{
test: /\.(svg|png|jpg)$/,
use: {
loader: 'url-loader',
loader: 'svg-url-loader',
loader: 'file-loader',
loader: 'resolve-url-loader',
},
},
devserver config
devServer: {
historyApiFallback: true,
hot: true,
contentBase: dest,
compress: true,
port: 9000,
publicPath: 'http://localhost:9000/dest',
},
Is it the devserver? css-module? sourceMap? I have trouble importing image files in css as well. Please help