0

So i started using webpack and scss for my react application. I have a images folder containing all my apps image files. I noticed when I tried setting a background image div to a url like 

background-image: url("../images/bg1.jpeg");

It wasn't being set and I was getting a error like "unknown module, may need a loader for this" or something from webpack. So i went ahead and got file loader, and my webpack config looks like this now:

Webpack

....

module: {
            loaders: [{
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        presets: ['es2016', 'react']
                    }
                },
                { // regular css files
                    test: /\.scss$/,
                    loader: 'style-loader!css-loader!sass-loader'
                },
                {
                    test: /\.jpe?g$|\.gif$|\.png$/i,
                    loader: "file-loader?name=/img/[name].[ext]"
                }
            ]
        }

So now i noticed there is two folders in my src files. One is images/ with a bunch of images i got for my app. And also a img/ folder which holds the image i requested in my scss auto generated my that file loader line I assume.

The thing is, in my scss it still points to images/ folder, so why and how does the other img/ folder work if its never being pointed to. I delete the folder and noticed right away my image won't be loaded without it.

Whats going on here? Do I need both, and if so why does my scss still require my original images/ folder url?

All this got really confusing for me.

ZarifS
  • 467
  • 1
  • 11
  • 20
  • You've given output in file-loader - `loader: "file-loader?name=/img/[name].[ext]"` You can correct it by typing - `loader: "file-loader` – Bikas Jan 13 '18 at 20:57
  • But that still duplicates my file. How can i just use the file i already have in my images folder? Like normal css does it? – ZarifS Jan 13 '18 at 21:07
  • You've output folder described in your folder, your image paths needs to be relative to that. Also, you don't need file-loader if you're just referencing from old location – Bikas Jan 13 '18 at 21:11
  • Ahh there we go. Awesome thank you i didn't know it had to be the path From the actual bundle file. Thanks a bunch! – ZarifS Jan 13 '18 at 21:16
  • Would it be possible to post your final solution? I am curious to know what your final config looks like. – Dave L Nov 12 '20 at 17:39

0 Answers0