为什么我在使用webpack.js时无法在scss中使用背景图像？

Question

我使用webpack.js进行构建项目： 玉/ SCSS / JS /的node.js 我的SCSS将编译为CSS：

 //SCSS
    .heading {
     background: url("/img/bg.png");
    }

  //CSS
   .heading {
   background- image:url('data:image/svg+xml;base64,...');

图片位于网址：http://localhost:3000/img/bg.png

但它没有显示为背景图像。 我知道我应该使用url / file-loader在css中包含图像 下一个配置有效，但我不能在scss / css文件中使用图像

{
 entry: "./src/js/main.js",
 devtool: "source-map",
 output: {
  path: __dirname + "/public",
  filename: "bundle.js"
},
module: {
  loaders: [
   {
    test: /\.css$/,
    loaders: ["style", "css"]
   },
   {
    test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
   },
   {
    test: /\.png$/,
    loaders: ["url-loader", "file-loader?sourceMap"]
   }
 ]
 }
}

Answer 1

我建议使用this one sass-loader这样的额外加载器，过去有一些known issues with resolving URLs，这可能是您的解决方案。