webpack中css背景图片路径url异常或者背景图片不显示的解决方法方法

[liu-dongyu]

解决方法1

1.安装 resolve-url-loader

npm i resolve-url-loader --save-dev

2.修改webpack配置文件

output： { publicPath： '/' }

{ test: /\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass'] }

解决方法2

1.安装 postcss-loader postcss-assets

npm install postcss-loader postcss-assets --save-dev

2.例子

output： { publicPath： '/' }
postcss： function() {
  return [
    require('postcss-assets')({
      relative: true,
      // 配置图片所在位置， 例如我的图片存在与 static 文件夹里面
      loadPaths: [path.resolve(__dirname, '../static')],
    }),
  ]
}

.css {
  background: resolve('css.png') ;
}

特别注意

css-loader 开启 sourceMap 功能时，output.publicPath 一定填写一个网址，例如 http://localhost:3000/，填其他一切背景图片都无法正确显示。issue

[XIAOGUIGUI]

还有其他解决方法？

[liu-dongyu]

@XIAOGUIGUI 是这两种解决方法都没用么？如果是开启 sourceMap 的话那没办法，只能 publicPath 填url.

[hu-qi]

还是没解决。。。