网页及；SCSS：如何使用映像路径？

我正在尝试建立一个基本的网页包项目。除了生成的CSS中的生成的图像路径之外，所有内容都是平滑的

文件夹结构：

src/
    assets/
        images/
    js/
    scss/
dist/              
    assets/           <--- generated correctly, incl. images
        images/
    bundle.js
    main.bundle.css   <--- includes "wrong" paths, starting with dist/
index.htm
webpack.config.js

src/scss/main.scss

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

module.exports = {
    watch: true,
    entry: ['./src/js/main.js', './src/scss/main.scss'],
    output: {
        filename: 'dist/bundle.js'
    },
    module: {
        rules: [
            { // regular css files
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader?importLoaders=1',
                }),
            },
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            },
            { // images
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: path.resolve(__dirname, "src/"),
                        outputPath: 'dist/'
                    }
                }
            ] 
        },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};

@import "./../../node_modules/bootstrap/scss/bootstrap";

body {
    background-image: url('../assets/images/bg.jpg');
}

body {
    background-image:url(dist/assets/images/bg.jpg)
}

dist/main.bundle.css

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

module.exports = {
    watch: true,
    entry: ['./src/js/main.js', './src/scss/main.scss'],
    output: {
        filename: 'dist/bundle.js'
    },
    module: {
        rules: [
            { // regular css files
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader?importLoaders=1',
                }),
            },
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            },
            { // images
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: path.resolve(__dirname, "src/"),
                        outputPath: 'dist/'
                    }
                }
            ] 
        },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};

@import "./../../node_modules/bootstrap/scss/bootstrap";

body {
    background-image: url('../assets/images/bg.jpg');
}

body {
    background-image:url(dist/assets/images/bg.jpg)
}

index.htm

<link rel="stylesheet" href="dist/main.bundle.css">

问题：

dist/main.bundles.css

已位于

dist/

中，但图像路径的前缀为

dist/

。我这边肯定有配置问题

---

有什么想法吗？提前谢谢

通过添加

publicPath:'../'

（）和

userrelativepath:true

（）解决的问题：

---

伙计，你救了我的一天

userelativepath

甚至在网页文档中都没有提到。。。而且，即使知道这一点，它仍然太令人困惑，我不得不返回一个文件夹，然后再次手动指向输出路径：

"options": {
    outputPath: (url, resourcePath, context) => {
        return `fonts/${url}`;
    },
    publicPath: '../fonts',
    useRelativePaths: true,
    name(resourcePath, resourceQuery) {
        return isDevelopment ? '[path][name].[ext]' : '[contenthash].[ext]'
    },
}

---

非常感谢您抽出时间回来回答您自己的问题。

我很高兴它帮助了您！：-）