If I use file loader things work just fine however we would not like to use file loader. Here is the problem:
Css/Sass Rule:
test: [/\.scss$/, /\.sass$/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {}
},
{
loader: 'sass-loader'
},
],
}),
Url-loader rule:
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
In my sass file I have:
.test {
background: url("/images/content-header-bg2.png");
}
When I run webpack I get:
Module not found: Error: Can't resolve './users/content-header-bg2.png' in 'project/src/sass'
@ ./node_modules/css-loader?{"importLoaders":2}!./node_modules/postcss-loader/lib?{}!./node_modules/sass-loader/lib/loader.js!./sass/global.scss
Is there something special you have to do in order to use url-loader with sass which is then compiled into css? Like I mentioned I don't want to have to use file-loader (which does work when I use it).