Как разрешить URL изображения внутри меньшего количества файлов

Question

У меня проблема с изображениями, которые я загружаю из своих файлов поменьше с background-url ().

У меня есть файл index.less с классом, у которого есть background-url (../img/img1.jpg) и @import, который вызывает другой файл меньше (component.less)

Это нормально, потому что webpack генерирует файл css с четко определенным путем.

Проблема возникает, когда в файле component.less я вызываю другое изображение в той же папке:

background-url (../ img / img2.jpg)

Webpack говорит, что не может найти файл ../img/img2.jpg.

webpack.config.js:

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var lessRules = {
    use: [
        { loader: 'css-loader' },
        { loader: 'less-loader' }
    ]
};


var baseConfig = {
    entry: {
        main: './less/index.less'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../css')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract(lessRules)
            },
            {
                test: /\.png$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '../img/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('main.css')
    ]
};

module.exports = baseConfig;

index.less:

.one{
    margin: auto;
    background-image: url(../../img/bankwire.png);
}

@import 'components/component';

component.less:

.two{
    margin: auto;
    background-image: url(../../img/bankwire-2.png);
}

/*If i change ../../img/bankwire-2.png by ../../../img/bankwire- 
 2.png then, webpack works fine*/

Ошибка, выдаваемая веб-пакетом:

Error: Can't resolve '../img/bankwire-2.png' in '/project/_dev/less'

Папка со структурой проекта

./
|
|-- (_dev)
|     |
|     |---(less)
|     |    |
|     |    |---[index.less]
|     |    |---(components)
|     |         |
|     |         |---[component.less]
|     |
|     |---[webpack.config.js]
|
|-- (img)
|    |
|    |---[bankwire.jpg]
|    |---[bankwire-2.jpg]
|
|-- (css)
|    |
|    |---[main.css]

Я давно пытался решить эту проблему, какая-то идея?

Спасибо!