首页 文章

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

提问于
浏览 次
32

我正在制作一个带有Webpack设置的React，我正在努力做一些看似应该是一个简单的任务 . 我希望webpack包含图像，并尽量减少它们，就像我吞咽一样，但我无法弄明白 . 我只是希望能够像我这样在我的CSS中链接图像：

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

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

我在src文件夹中包含了所有的css / js / img文件夹 . 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 回答

  • 44

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

    要安装它：

    npm install url-loader --save-dev

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

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

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

    还要确保正确指定公共路径以及要加载的图像路径 .

    回复于

相关问题