I have an issue with webpack (in combination with sass-loader and file-loader). I refer to an image in two different bundle (scss) files, where I point the background-image url to exactly the same path.
The bundle file that I import first is show properly, but the second files returns an 'undefined' url for the background-property.
Has anybody encountered this issue before?
I have tried various options for file-loader, but none worked so far.
The only option that does work for me is duplicating the image and refer to the duplicate (like referring to two different files).
This is far from best practise, because I load two images now, which are exactly the same.
My webpack.config.js looks like this:
const autoprefixer = require('autoprefixer');
var path = require('path');
module.exports = {
entry: ['./src/app.scss', './src/app.js'],
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css'
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-object-assign']
},
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'Images'},
}]
}
],
},
};
The two scss snippets (using the same url) look like this:
body.withLogo::after{
content: '';
display: block;
position: fixed;
z-index: -3;
height: 100vh;
width: 100%;
background: url('../Images/logo-overlay.png');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.3;
top: 0;
right: -30%;
}
and
#logo-overlay{
z-index: 10;
position: absolute;
top: 0;
min-height: 100%;
width: 100%;
background: url('../Images/logo-overlay.png');
opacity: 0.3;
background-size: auto 100%;
background-repeat: no-repeat;
}
