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

ttygqcqt  于 2023-10-19  发布在  Webpack
关注(0)|答案(3)|浏览(104)

我正在做一个React w/ Webpack的设置,并且正在努力做一个看起来应该是一个简单的任务。我想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
  }
};
bzzcjhmw

bzzcjhmw1#

我遇到了类似的问题,发现你可以使用url-loader来解决CSS中的"url()"语句,就像其他的require或import语句一样。
要安装它:
npm install url-loader --save-dev
它将安装可以将解析的路径转换为BASE64字符串的加载程序。
在您的webpack配置文件中使用加载器中的url加载器

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

另外,请确保您正确指定了公共路径以及您试图加载的图像的路径。

kuuvgm7e

kuuvgm7e2#

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

xpszyzbs

xpszyzbs3#

如果你是从谷歌来的,file-loaderurl-loader都不适用于你的webpack版本(5.x),这里有一个简单的方法来解决这个问题,@SomoKRoceS回答说:https://stackoverflow.com/a/69906036/3356230

{
  test: /\.(jpg|png|svg|gif)$/,
  type: 'asset/resource',
},

相关问题