Webpack config with css loader

Question

私はこのwebpack設定をbabelとcssローダーの読み込みに使用していますが、エラーが発生しています。私のwebpackの設定は非常にうまくいきます。もし私がbabel loaderを使うのであれば、css loaderは動作していません。私のプロジェクトの1から

例：

var path = require('path'); 

var config = { 
    entry: './main.js', 

    output: { 
     path : path.join(__dirname, './'), 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'style-loader!css-loader', 
     } 
     ] 
    } 
} 

module.exports = config; 

のWebPACKを実行している間、私は取得していますエラーが

ERROR in ./~/css-loader!./main.js 

Error screenshot

Answer 1

あなたのWebPACKの設定でスタイルローダーが必要

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
... 
module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css") 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css!sass") 
      }, 
     ], 
    }, 
... 

Answer 2

.cssと一致するインポートのCSSローダーを設定する必要があります。.jsxです。今は、有効なCSSではないcss-loaderにJavaScriptファイルを渡しているので、失敗します。正しいローダー設定は次のとおりです。私はテストにそれを変更した

module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
      presets: ['es2015', 'react'] 
      } 
     }, 
     { 
      test: /\.css$/, 
      loader: 'style-loader!css-loader', 
     } 
    ] 
}