[vue2.0+webpack2.0]SCSS文件中引用到的图片无法导出到dist目录

Question

项目中用到SCSS，里面用mixins函数处理背景图片：

@mixin bgImage($baseUrl) {
  background-image: url("/images/" + $baseUrl);
}

然后，在webpack中配置相应loader，处理SCSS文件，并且针对图片做导出：

module: {
        rules: [
            ...
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]'
                }
            }]
    },
    plugins: [
        ...
        //将CSS从JS文件中分离出来，并添加到输出html文件中
        new ExtractTextPlugin('css/' + '[name]-[hash].css'),
    ]

webpack.config对路径配置如下：

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        filename: 'js/build-[hash].js',
        chunkFilename: 'js/[id].build.js?[chunkhash]'
    },
    ...
}

生成的main.css里，图片引用如下：

background: url("/images/home_icon4.png") no-repeat center center; }

但是，dist包下并没有SCSS文件中引用的图片，只有html里面的<img>标签定义的图片：

为什么会这样？求大神解答？

Answer 1

我也遇到了这个问题搜到这里了，楼主应该已经解决了，我来答一下方便后面童鞋，sass-loader是读取绝对路径的，所以在单独scss文件里应当写[static]/img，[static]是绝对路径，按楼主的目录结构应当是src/images/[imgname].png

Answer 2

把图片放到 /static/img 目录下，然后将路径写成绝对路径：/static/img

Answer 3

"/images/" + $baseUrl 这样应该会取到绝对路径，电脑根目录下的images文件夹。换成相对路径不就行了！

Answer 4

最后楼主有解决吗？