Webpack-Konfig mit CSS-Lader

Question

Ich habe diese Webpack-Konfiguration zum Laden von Babel und CSS Loader verwendet, aber Fehler bekommen. Meine Webpack-Konfiguration funktioniert sehr gut, wenn ich nur Babel Loader verwende, aber CSS Loader funktioniert nicht.

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; 

Der Fehler, den ich immer bin, während webpack läuft

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

Error screenshot

Answer 1

Sie benötigen Stil loader in Ihrem webpack config:

Beispiel aus einem meiner Projekte:

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

Sie müssen die CSS-Loader für Importe konfigurieren, die mit .css und nicht mit .jsx übereinstimmen. Im Moment übergeben Sie eine JavaScript-Datei an die css-loader, die kein gültiges CSS ist, also schlägt es fehl. Die richtige Loader-Konfiguration ist:

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