Hinzufügen von CSS zu einem ReactJS-Projekt

Question

Ich benutze das Tutorial hier als Basis, aber ich habe keine Beispiele zum Importieren von CSS-Dateien in eine App. Ich habe Kleinigkeiten gefunden, aber nicht genug, um zu wissen, wie es geht. Ich habe "Import-Stile von './styles/main.css';" in App.jsx und meine Webpack-Konfiguration ist unten.

var css = require("css!./main.css"); 

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

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

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

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel', 

       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: "style!css!" 
      } 
     ] 
    } 
} 

module.exports = config;` 

ich den Fehler:

./styles/main.css
Module parse failed: C:\Projects\reactApp\styles\main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)

dass nur div {} jetzt hat Datei.

Answer 1

In Ihrem webpack Config müssen Sie nur style-loader und css-loader hinzuzufügen (Sie müssen npm install es zuerst):

{ test: /\.css$/, loader: 'style-loader!css-loader' }, 

Dann können Sie die CSS in Ihre .js Dateien (Komponenten) erfordern:

require('./styles/main.css');