のWebPACK（反応中）1 + SASS - 私はすべての画像およびその他の資産のフォルダの画像フォルダを持っている私はSASSとReact.jsでプロジェクトを持っているとWebPACKの1に</p> <p>を使用して

Question

だけでは私のイメージのままにします。

私はwebpackに画像を何もしたくありません。私はそれらをURLでランタイムにロードします。 jsxコードでイメージURLをインラインで使用してJSXで解決しました（それをインポートするのではなく）。

しかし、私がSASSで同じことをしようとしているときは、それは違うのです。 私は絶対パス/images/abc.pngでそれらを参照していました。 私はそれらのためのwebpackローダーを持っていなかった、それはちょうど働いた。 しかし、私はそれを相対パス../../www/images/abc.pngに変更しなければなりませんでした。それはすべて壊れました。 Webpackローダーなしでは動作を拒否します。各画像にエラーが発生します。 私はファイルローダーを使用しようとしましたが、すべての画像をビルドフォルダにコピーします。 私はurl-loaderを使用しようとしましたが、結果として非常に肥大化した結果のCSSファイルにイメージが含まれていました。

だから、私は画像を無視してランタイムにURLでアドレスするのには何が使えますか？

おかげ

Answer 1

一つの可能​​性はfalseにurl option of the css-loaderを設定するので、WebPACKのは、URLには触れません。 .scssのためのあなたのルールは何かを見ることができる（あなたがextract-text-webpack-pluginを使用すると仮定して）これを好き：

のWebPACK 1：

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?url=false!sass-loader') 
}, 

のWebPACK 2：

{ 
    test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { loader: 'css-loader', options: { url: false } }, 
     { loader: 'sass-loader' } 
    ] 
    }) 
} 

しかし、それはすべてのURLだけでなく、あなたのイメージを無視します。それが問題の場合は、file-loaderとオプションemitFile: falseを使用してファイルをコピーしません。しかし正しいパスを得るには、回避策が必要です。名前に[path]を使用すると、contextからの相対パスが使用されます。ディレクトリ（例：build/）に作成するため、publicPathオプションを設定して1つのディレクトリ（../）に移動する必要があります。

のWebPACK 1：

{ 
    test: /\.png/, 
    loader: 'file-loader?emitFile=false&name=[path][name].[ext]&publicPath=../' 
}, 

のWebPACK 2：あなたは、次のルールを与えることになる、あなたのWebPACKの設定でcontextを設定したか、あなたの出力CSSファイルがより大きい場合

{ 
    test: /\.png/, 
    loader: 'file-loader', 
    options: { 
    emitFile: false, 
    name: '[path][name].[ext]', 
    publicPath: '../' 
    } 
} 

ビルドディレクトリの1つ下の階層にある場合は、publicPathオプションを調整する必要があります。