Почему webpack ставит не правильные url для картинок при сборке scss файлов?

Question

[Вадим]

Доброго времени суток, пытаюсь настроить webpack и столкнулся с проблемой url в scss файлах для картинок и шрифтов в font-face. Я знаю что это распространенная проблема, но я так и не нашел как ее исправить у себя,
я только пытаюсь освоить его буду признателен за подробное описание проблемы и лечения. Заранее благодарю.
Структура проекта

Конфиг файл:

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const paths = {
    src: path.join(__dirname, "./src"),
    build: path.join(__dirname, "./build")
};

module.exports = {
    entry: {
        "js/app.js": paths.src + "/js/app.js",
        "js/lk.js": paths.src + "/pages/lk.js",
        "css/style.css": paths.src + "/scss/style.scss"
    },
    output: {
        path: paths.build,
        filename: "[name]"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    publicPath: "../",
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            
                        },
                        {
                            loader: "postcss-loader",
                            
                        },
                        {
                            loader: "sass-loader",
                            
                        }]
                })
            },

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ["es2015"],
                        plugins: ["transform-runtime"]
                    }
                }
            },
            {
                test: /\.(jpe?g|svg|png)(\?.+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: paths.src + "/img",
                        name: "[name].[ext]",
                        outputPath: "/img/"
                    }
                }
            },
            {
                test: /\.(ttf|woff|woff2?|otf|eot)(\?.+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: paths.src + "/fonts",
                        name: "[name].[ext]",
                        outputPath: "/fonts/"
                    }
                }
            }

        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: paths.src + "/index.html",
            chunks: ["js/app.js", "js/common.js"]
        }),
        new HtmlWebpackPlugin({
            template: paths.src + "/pages/lk.html",
            filename: "pages/lk.html",
            chunks: ["js/lk.js", "js/common.js"]
        }),

        new ExtractTextPlugin("[name]"),

        new webpack.optimize.CommonsChunkPlugin({
            name: "js/common.js"
        })
    ],
    devServer: {
        stats: "errors-only",
        port: 3000,
        hot: true
    }

};

_main.scss

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Ubuntu", sans-serif;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.clearfix{
    &:after{
        content: " ";
        display: table;
        clear: both;
    }
}
.img{
    width: 100px;
    height: 100px;
    background-image: url("../img/q-balance.png");
}

Все scss/css файлы подключаю в style.scss файл через "@import", его потом подключаю в entry файл в конфиге, на выходе хочу получить что бы весь css был в одном файле в build/css/style.css и получаю не те url для картинок\шрифтов font-face

/*==========BASE==========*/
@font-face {
  font-family: 'Ubuntu';
  src: url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu.woff2) format("woff2"), url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu.woff) format("woff"), url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu.eot) format("eot");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Ubuntu-Bold';
  src: url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu-Bold.woff2) format("woff2"), url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu-Bold.woff) format("woff"), url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/fonts/fonts/Ubuntu-Bold.eot) format("eot");
  font-weight: normal;
  font-style: normal; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Ubuntu", sans-serif; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }

.clearfix:after {
  content: " ";
  display: table;
  clear: both; }

.img {
  width: 100px;
  height: 100px;
  background-image: url(C:\Users\vadim\Documents\GitHub\WebpackTutorial\temp\src/img/img/q-balance.png); }