Fehler erhalten: Modulparse fehlgeschlagen: ... unerwartetes Zeichen '#'

Question

Ich benutze Webpack zum ersten Mal und möchte ein paar CSS mit meiner react/redux-Anwendung verwenden. Ich folgte einem Führer, schien aber immer noch Probleme zu haben. Ich bekomme den obigen Fehler, wie Sie sehen können.

Ordnerstruktur sieht wie folgt aus:

.git 
-node_modules 
-public 
-bundle.js 
-index.html 
-src 
-actions 
-components 
-reducers 
app.js 
-style 
-style.css 
.babelrc 
.gitingore 
package-lock.json 
package.json 
README.md 
server.js 
webpack.config.js 

Dies ist die genauen Fehler:

Uncaught Error: Module parse failed: C:\Users\Amazo\projects\reduxApp\style\style.css Unexpected character '#' (1:0) 
You may need an appropriate loader to handle this file type. 
| #row1 { 
| margin-top: 15px; 
| } 

Ich werde meine webpack Config-Datei unten schreiben:

var path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var HTMLWebpackPlugin = require('html-webpack-plugin'); 


module.exports = { 
    entry: './src/app.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'public') 
    }, 
    watch: true, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude:/node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-1'] 
     } 
     }, 
     { 
     use: ['style-loader', 'css-loader'], 
     test: /\.css$/ 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.js','.jsx'] 
    }, 
    plugins: [ 
    new HTMLWebpackPlugin({ 
     template: 'public/index.html'; 
    }), 
    new ExtractTextPlugin('style.css') 
    ] 
}; 

Answer 1

.css in Ihrem resolve

resolve: { 
    extensions: ['.js','.jsx', '.css'] 
}, 

Andernfalls webpack nicht in der Lage sein, es zu verarbeiten richtig