Mein Webpack erzeugt meine CSS-Datei nicht

Question

Ich habe ein Problem mit Webpack und meine Reactive-App. Ich entwickle meine App in Reaktion, aber wenn ich mein Bundle-Skript ausführen, um Webpack auszuführen, wird die Ausgabe-CSS nicht generiert.

Hier ist meine Komponente

import React from 'react' 
import { Link } from 'react-router' 

import styles from './Header.css' 

function Header() { 
    return (
    <header className={styles.header}> 
     <h1> 
     Mi first react app 
     </h1> 

     <nav role="navigation"> 
     <Link to="/"> 
      Home 
     </Link> 
     <a 
      href="http://google.com" 
      target="_blank" 
     > 
      Google 
     </a> 
     </nav> 
    </header> 
) 
} 

export default Header 

Meine webpack config:

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

module.exports = { 
    entry: ['babel-polyfill', path.join(__dirname, '../src/client.js')], 
    output: { 
    filename: 'app.js', 
    path: path.join(__dirname, '../built/statics') 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /(node_modules)/, 
     query: { 
      presets: ['es2016', 'es2017', 'react'], 
      plugins: ['transform-es2015-modules-commonjs'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules' }) 
     } 
    ] 
    }, 
    target: 'web', 
    plugins: [ 
    new ExtractTextPlugin('../statics/styles.css') 
    ], 
    watch: true 
} 

Wenn Sie brauchen, meine CSS ist dies:

.header { 
    background: linear-gradient(90deg, #1c3643 0, #273b46 25%, #1e5372); 
} 

Im Vorfeld Dank für jede Hilfe zu entdecke, was mir fehlt

Answer 1

Können Sie bitte versuchen, Änderungen wie unten erwähnt vorzunehmen?

Was ist "Header.css"?

Was nutzt dieser Code?

import styles from './Header.css' 

Der Dateiname ist styles.css als in ExtractTextPlugin erwähnt.

Sie sollten die Datei "statics/styles.css" direkt in Ihren HTML-Code einfügen.

Auch hier

function Header() { 
    return (
    <header className="header"> 
     <h1> 
     Mi first react app 
     </h1> 

     <nav role="navigation"> 
     <Link to="/"> 
      Home 
     </Link> 
     <a 
      href="http://google.com" 
      target="_blank" 
     > 
      Google 
     </a> 
     </nav> 
    </header> 
) 
} 

Das Ziel ExtractTextplugin ist eine separate einzelne CSS-Datei zu erzeugen, die wie im allgemeinen Fall separat verwendet werden könnten.