如何在较少文件中解析图像网址

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：

**TrainingCourse.java**
private Set<String> nameList;

**TrainingCourse.hbm.xml**
<set name="nameList"
    table="TRAINING_GROUP" 
    sort="unsorted">
    <key column="GRO_ID"/>
    ** tried also <key column="GRO_TCO_ID"/> **
    <element column="GRO_NAME" type="string"/>
</set>

index.less：

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;

component.less：

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

@import 'components/component';

webpack引发的错误：

.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'

很长一段时间以来，我一直在尝试解决这个问题，

谢谢！