webpackでアプリケーションをビルドするときのCSSエラーのimgパス

Question

私のプロジェクトは、画像からCSSモジュールとURLローダーで動作します。 そして、localhostではすべて正常に動作します。 私は場合

Module not found: Error: Can't resolve '../img/spinner.gif' 

私のスタイルですべての画像からこの のように、私はWebPACKの上で私のアプリを構築しようとすると、私はビルドCSS中にエラーが発生します/

を反応させるのに私のコンポーネントからの私のスタイルをインポートしますcss-loader?url=falseビルド作業がエラーなしで使用していますが、接続してもIMGS

画像

{ 
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
    exclude: /(node_modules|bower_components)/, 
    loader: "url-loader?limit=10000&mimetype=image/svg+xml" 
    }, 
    { 
    test: /\.gif/, 
    exclude: /(node_modules|bower_components)/, 
    loader: "url-loader?limit=10000&mimetype=image/gif" 
    }, 
    { 
    test: /\.jpg/, 
    exclude: /(node_modules|bower_components)/, 
    loader: "url-loader?limit=10000&mimetype=image/jpg" 
    }, 
    { 
    test: /\.png/, 
    exclude: /(node_modules|bower_components)/, 
    loader: "url-loader?limit=10000&mimetype=image/png" 
    } 

のための私のローダを持っていけないではない反応し0

とビルドコンフィグ

loaders.push({ 
    test: /\.sass$/, 
    loader: ExtractTextPlugin.extract({fallback: 'style-loader', use : 'css-loader?sourceMap&localIdentName=[local]___[hash:base64:5]!sass-loader?outputStyle=expanded'}), 
    exclude: ['node_modules'] 
}); 

の私のローダSASS/CSSと私のファイルツリー

これをどのように修正しますか？

Answer 1

私はApp.jsxがあなたのエントリポイントである（またはindex.jsx、それは何も変更しない）と仮定ので、この./img/spinner.gifの代わり../img/spinner.gifようなあなたのspinner.gifをインポートしたり、要求すべきです。

ファイルツリーのレベルは上がりますが、imgとApp.jsxは同じレベルになります。