Ahh.... After a long hours of debugging I have finally found the issue. It was my foolishness because of which I struggled. I wanted to delete this question but thought that it would help new comers like me when the stuck to similar issues.

Problem was here

loader: 'url-loader?limit=10000'

I was setting the limit to file size of 10kb without really knowing what it does. And the image which I was loading was of size 21kb ! This happens when you copy some else webpack config files :) Sign of javascript fatigue !

depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Do you really need 3 separate components to get your image url? wouldn't: $img and then setting that to /folder/img.ext be far easier?

Also, you don't need the #{} for repeat by the way.

I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.

Cheers, Jannis

Update:

Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
    }
}
.testing {
    @include background('/my/img/path.png');
}

This will then output:

.testing {
  background-image: url("/my/img/path.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

Or you can use the shorthand version:

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
    @include backgroundShorthand('/my/img/path.png');
}

Which will generate:

.testing2 {
  background: transparent url(/my/img/path.png) no-repeat 0 0;
}

Lastly if you want to specify your base path to your image directory separately you can do the following:

$imagedir:'/static/images/'; // define the base path before the mixin

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
    @include backgroundShorthandWithExternalVar('filename.png');
}

This will then generate:

.testing3 {
  background: transparent url(/static/images/filename.png) no-repeat 0 0;
}

Is this what you needed?

If not feel free to update the question or reply/comment.

In a perfect world your URL paths should be absolute, so always starting with / refering to the base path of the domain.

You have:

background-image: url('./../img/coffee.png') no-repeat;

The shape you should be looking for is:

 background-image: url('/folder/img/coffee.png') no-repeat;
                        ^ This lead slash references the base path of the domain.

So, the above example is domain.com/folder/img/coffee.png - you see the leading / is the base the whole URL is based from.

The advantage of this is your SCSS or CSS or image files can be placed in any location in your domain structure.

Absolute Pathing is the key to success!

Example 2:

 background-image: url('/images/tea.png') no-repeat;

Image is located at:

 mydomain.org/images/tea.png 

The location of the SCSS or CSS file is not important, as long as it's on the same domain.

It works if I add at the beginning of the HTML source : (remove space after < (I cannot copy-paste correctly...))

< meta http-equiv="X-UA-Compatible" content="IE=edge">