web-dev-qa-db-ja.com

WebpackでCSSで画像を使用する方法

私はReact w/Webpackのセットアップを行っており、単純なタスクのように見えるのに苦労しています。 tそれを理解します。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
  }
};
cssimagereactjswebpackloader
38
user3737841

私は同様の問題に悩まされており、CSSの"url()"ステートメントを他のrequireまたはimportステートメントと同様に解決するために url-loader を使用できることがわかりました。

それをインストールするには：

npm install url-loader --save-dev

解決されたパスをBASE64文字列として変換できるローダーをインストールします。

あなたのwebpack設定ファイルでは、ローダーでurl-loaderを使用してください

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

また、パブリックパスとロードしようとしている画像のパスを正しく指定していることを確認してください。

58
WitVault