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]
}

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

阅读 7.5k
2 个回答

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

有点神奇的。
一般这个路径主要受publicpath和use:['file-loader?name=images/[name].[ext]']这行代码影响,改成

use:['file-loader?name=/images/[name].[ext]']

试试呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进