如何在 Webpack 中使用 css 中的图像答案

【问题标题】：How to use images in css with Webpack如何在 Webpack 中使用 css 中的图像
【发布时间】：2016-05-24 00:07:25
【问题描述】：

我正在做一个带 Webpack 的 React 设置，并且正在努力做看起来应该很简单的任务。我希望 webpack 包含图像，并像我一样使用 gulp 最小化它们，但我无法弄清楚。我只是希望能够像这样在我的 css 中链接图像：

/* ./src/img/background.jpg */

body { background: url('./img/background.jpg'); }

我的所有 css/js/img 文件夹都在 src 文件夹中。 Webpack 输出到 dist 文件夹，但我不知道如何在那里获取图像。

这是我的 webpack 设置：

 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/dev-server',
   './src/index.js'
  ],
  output: {
  path: path.join(__dirname, 'dist'),
  //  publicPath: './dist',
  filename: 'bundle.js'
  },
  plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
  template: './src/index.html'
   })
  ],
  module: {
  loaders: [{
   exclude: /node_modules/,
   test: /\.js?$/,
   loader: 'babel'
   }, {
  test: /\.scss$/,
  loader: 'style!css!sass'
    }, {
  test: /\.(png|jpg)$/,
  loader: 'file-loader'
  }]
 },

 devServer: {
  historyApiFallback: true,
  contentBase: './dist',
  hot: true
  }
};

【问题讨论】：

标签： css image reactjs webpack loader

【解决方案1】：

我遇到了类似的问题，发现您可以使用 url-loader 来解析 CSS 中的 "url()" 语句，就像任何其他 require 或 import 语句一样。

要安装它：

npm install url-loader --save-dev

它将安装可以将解析路径转换为 BASE64 字符串的加载器。

在你的 webpack 配置文件中使用加载器中的 url-loader

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader'
}

还要确保您正确指定了公共路径以及您尝试加载的图像的路径。

【讨论】：

好吧，我的 webpack-dev 服务器从 /dist 提供服务，我的图像在 /src 中，所以你知道我将如何引用 .css 文件中的图像吗？图像是否应该与我的 bundle.js 一起卷起？我只是不确定如何将它们带到 /dist，因为 /dist 文件夹只是 webpack-dev-server 提供的虚拟文件夹
@user3737841 您应该能够require 样式表中的图像。例如，background-image: url('../assets/img/logo-dark.png')。您只需要尝试/调整即可获得正确的路径。
是否可以在不使用内联图像的情况下获得相同的最终结果？理想情况下，应该只将图像复制到保留相同相对路径的 dist 文件夹。这可能吗？
@VariableContent 是的，只需使用文件加载器。图像将被复制到输出文件夹中。
@VariableContent btw url-loader 有一个选项limit，如果图像大于限制，它将解析为 url 而不是 base64 字符串

【解决方案2】：

在 scss 文件中使用 background-image: url('./img/background.jpg') 对我有用，没有 url-loader。只有 .png|.jpg|... 等的文件加载器。

【讨论】：

OP特别解释说这对他们不起作用