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

Posted 2023-02-22

【中文标题】如何在 Webpack 中使用 css 中的图像

【英文标题】：How to use images in css with Webpack

【发布时间】：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
  
;

【参考方案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特别解释说这对他们不起作用