webpack css-loader：CSSファイル内にurl（ 'path'）として参照されているpngファイルを読み込めません。

Question

私はwebpackを使用して最初のステップを踏み出しています。私の.cssファイルで は、URLで定義された画像の背景があります：

background-image: url("patterns/header-profile.png"); 

アプリは見事にこのエラーで打ち上げにcraches：

ERROR in ./~/css-loader?"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[local]__[hash:base64:5]"}!./~/postcss-loader!./src/assets/css/in 
spinia.css 

Module not found: Error: Can't resolve 'patterns/header-profile.png' in 'C:\---- absolute path ---\src\assets\css' 

このすべての最初には、私のプロジェクトであります構造：

./src/ 
    --> assets 
     --> patterns 
       --> header-profile.png 
     --> mystyle.css // <-- sos: this is where background img is defined 
--> index.html 
--> index.tsx 

第二に、これは私のwebpack.config.jsonです：

var webpack = require('webpack'); 
var path = require('path'); 

// variables 
var isProduction = process.argv.indexOf('-p') >= 0; 
var sourcePath = path.join(__dirname, './src'); 
var outPath = path.join(__dirname, './dist'); 

// plugins 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: sourcePath, 
    entry: { 
    main: './index.tsx', 
    vendor: [ 
     'react', 
     'react-dom', 
     'react-redux', 
     'react-router', 
     'react-router-redux', 
     'redux' 
    ] 
    }, 
    output: { 
    path: outPath, 
    publicPath: './', 
    filename: 'bundle.js', 
    }, 
    target: 'web', 
    resolve: { 
    extensions: ['.js', '.ts', '.tsx'], 
    // Fix webpack's default behavior to not load packages with jsnext:main module 
    // https://github.com/Microsoft/TypeScript/issues/11677 
    mainFields: ['main'] 
    }, 
    module: { 
    loaders: [ 
     // .ts, .tsx 
     { 
     test: /\.tsx?$/, 
     loader: isProduction 
      ? 'awesome-typescript-loader?module=es6' 
      : [ 
      'react-hot-loader', 
      'awesome-typescript-loader' 
      ] 
     }, 
     // css 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      publicPath: './', 
      loader: [ 
      { 
       loader: 'css-loader', 
       query: { 
       modules: true, 
       sourceMap: !isProduction, 
       importLoaders: 1, 
       localIdentName: '[local]__[hash:base64:5]' 
       } 
      }, 
      { 
       loader: 'postcss-loader' 
      } 
      ] 
     }) 
     }, 
     // static assets 
     { test: /\.html$/, loader: 'html-loader' }, 
     { test: /\.png$/, loader: "url-loader?limit=10000" }, 
     { test: /\.jpg$/, loader: 'file-loader' }, 
    ], 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     context: sourcePath, 
     postcss: [ 
      require('postcss-import')({ addDependencyTo: webpack }), 
      require('postcss-url')(), 
      require('postcss-cssnext')(), 
      require('postcss-reporter')(), 
      require('postcss-browser-reporter')({ disabled: isProduction }), 
     ] 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.bundle.js', 
     minChunks: Infinity 
    }), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'styles.css', 
     disable: !isProduction 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'index.html' 
    }) 
    ], 
    devServer: { 
    contentBase: sourcePath, 
    hot: true, 
    stats: { 
     warnings: false 
    }, 
    }, 
    node: { 
    // workaround for webpack-dev-server issue 
    // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179 
    fs: 'empty', 
    net: 'empty' 
    } 
}; 

そして最後に、これは私が、インデックスのjsファイルにmystyle.cssを必要な方法である：私はstackoverflowの、githubのとGoogleの周りに見ている

require('/assets/css/inspinia.css'); 

。他の人たちも同様の問題に直面しているのを見ました。しかし、私は彼らが適用したさまざまなソリューションを理解していません（私はwebpackに初めてです）。

ご協力いただければ幸いです。

Answer 1

これは私の問題を解決した理由を理解することなくこの問題を解決した方法です（プロパティを変更するだけで...）。私webpack.config.jsonファイル上のすべての

まず私はこのpublicPathが私のインデックスに（ '/'）と相対的ではない（ './'）

{ 
    output:{ 
    publicPath: '/' 
    } 
} 

第二に、絶対的であることを確認しました。

require('./assets/css/mystyle.css') 

そして最後に、私は私の画像を参照mystyle.cssの内側に、私はそれが絶対パス（...狂気であることを確認しました：。私はmystyle.cssを必要とし、私はそれが相対パスであることを確認しましたTSX ..）。たとえば、私は持っているでしょう：

background: url("/patterns/header-profile.png") 

それは魔法のように動作します！

誰かがこの設定の背後にある論理を説明することができます.CSPファイル、画像リソース、絶対パス/相対パスについて特にwebpackがどのように機能するかを理解するのに役立ちます。