1

I'm trying to use file loader to process images and include them into my build folder.

Images which are inside html files appear in build but images from styles not.

I keep my webpack config splitted into 2 files and use webpack merge module to merge them.

This is how i configure css processing:

exports.loadCSS = function (paths) {
    return {
        module: {
            rules: [{
                test: /\.scss$/,
                include: paths.app,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            root: paths.root
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            }]
        }
    };
};

And this is file loader configuration:

            {
                test: /\.(jpg|png|svg)$/,
                loader: 'file-loader?name=[path][name].[hash].[ext]'
            }

Piece of scss:

.img-from-styles {
  width: 100px;
  height: 100px;
  background: url('/imgs/imgInStyles.jpg');
}

Here is project itself containing full configuration

Rantiev
  • 2,121
  • 2
  • 32
  • 56

1 Answers1

0

You need to use url-loader Install it

npm install url-loader --save-dev

How use it

{
    test: /\.(png|jpg|jpeg|gif)$/,
    loader: 'url-loader?limit=10000'
 }

Now webpack will be able to resolve your url from your styles

Update

Webpack (css-loader) need exact file path so it can resolve the file or url for you.

Rantiev
  • 2,121
  • 2
  • 32
  • 56
Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • As i understood from documentation if we use file-loader it's the same to url-loader. There is a difference only when we are talking about small files which are less then limit set. url-loader will fallback to file-loader even we have file more than 10kb if less images will be included in css itself as base64 strings. So i will try this but don't think it will fix the problem. – Rantiev Apr 23 '17 at 10:08
  • Nope it doesn't work. You can pull my project and see by yourself. – Rantiev Apr 23 '17 at 11:37
  • @Rantiev i am taking a look at your project now. – Jorawar Singh Apr 23 '17 at 12:04
  • @Rantiev in your home.scss you are giving a relative path but the folder is located imgs is in root giving absolute path resolved the image background: url('../../../imgs/imgInStyles.jpg');. – Jorawar Singh Apr 23 '17 at 12:10
  • @Rantiev for me it is working by using both relative and absolute path. – Jorawar Singh Apr 23 '17 at 12:14
  • Are you using "npm run prod" task? In dev mode it just works because nothing done to css images, link is right and imgs folder exists where dev server runs it. There is no build folder at all when you try to build for production. – Rantiev Apr 23 '17 at 12:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142391/discussion-between-mrjsingh-and-rantiev). – Jorawar Singh Apr 23 '17 at 12:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142394/discussion-between-rantiev-and-mrjsingh). – Rantiev Apr 23 '17 at 12:51