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

【问题标题】：Why I can't use background image in scss when I use webpack.js?为什么我在使用 webpack.js 时无法在 scss 中使用背景图片？
【发布时间】：2016-08-19 02:53:03
【问题描述】：

我使用 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"]
   }
 ]
 }
}

【问题讨论】：

如果没有得到预期的结果，则需要显示 Sass 代码和编译后的结果。
我添加了我的 SCSS 和 CSS 的内容
这是实际输出吗？因为背景图像中的空格无效。此外，对于 png 来说，这是完全错误的 mime 类型。

标签： sass webpack

【解决方案1】：

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

【讨论】：