webpack 编译scss出来的css图片路径为background: url([object Object])

问题描述

问 题

编译前

.b{
  width: 100px;
  height: 100px;

}
.c{
  background: url("../images/icon-admin.png");
}

编译后

.b {
  width: 100px;
  height: 100px; }

.c {
  background: url([object Object]); }

webpack.config

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSASS = new ExtractTextPlugin('[name].css');

console.log(__dirname);
module.exports = {
    entry: {
        index: './js/c'
        // stuMessage: '',
        // stuInf: '',

    }
    , output: {
        path: path.resolve(__dirname, './dist'),
        // publicPath:'/img/',
        filename: '[name].js'
    }
    ,
    module: {
        rules:[
            {
                test:/\.js$/,
                include:path.resolve(__dirname,'./js'),
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env']
                    }
                }
            }
            ,{
                test:/\.(png|jpg|jpeg|gif)$/,
                use:['file-loader?name=images/[name].[ext]']
            }
            ,{
                test:/\.scss$/,
                include:path.resolve(__dirname,'./scss'),
                use:extractSASS.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })
            }

        ]
    }
    ,plugins:[extractSASS]
}

有没大哥帮忙看看问题，找了很久

解决方案

我也遇到了这个问题，后来运行官网的示例，发现是file-loader的版本问题，把"file-loader": "^1.0.0" 换成了 "file-loader": "^0.11.2"这个版本后就没有问题了

这篇关于webpack 编译scss出来的css图片路径为background: url([object Object])的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！