Webpack不能从CSS的background-image属性加载图片

3

我完全不知道该怎么办...我正在使用Webpack与CSS,style,sass和stylus加载程序。这是我的webpack配置...当我使用类似下面的东西时,图片无法显示:

body
    background-image: url('bg.jpg')

如果我使用<img>标签在HTML文档中引入图片,它们会像正常显示一样...

我的webpack配置:

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist/static'),
    publicPath: '/static/',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
      },
      {
        test: /\.woff/,
        loader: 'url?prefix=font/&limit=10000&mimetype=application/font-woff'
      }, {
        test: /\.ttf/,
        loader: 'file?prefix=font/'
      },
      {
        test: /\.eot/,
        loader: 'file?prefix=font/'
      },
      {
        test: /\.svg/,
        loader: 'file?prefix=font/'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'url?limit=10000&name=[name].[ext]?[hash:7]',
          'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
        ]
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: {
      sass: 'style!css!sass?indentedSyntax'
    }
  }
}

我会尝试使用url(require('myimage.png')),但我不确定它是否有效。 - TiagoLr
1个回答

9
你需要在图像网址之前添加一个~。这会告诉Sass加载程序使用webpack的require解析文件路径;默认情况下,它将像普通的Sass图像url()一样解析。因此,它应该是background-image: url('~bg.jpg')--然后只需确保webpack通过你的配置知道如何找到bg.jpg所在的目录。

太棒了,这正是我在寻找的好答案。谢谢你。 - Ignacio Bustos

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接