我的webpack不生成我的css文件

Question

我有一个webpack和我的反应应用程序的问题。我正在开发我的应用程序，但是当我运行我的包脚本运行webpack时，它不会生成输出css。

这里是我的组件

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 

我的WebPack配置：

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 
} 

如果你需要，我的CSS是这样的：

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

在前进，感谢任何人的帮助发现我缺少的东西

Answer 1

您可以请尝试进行如下所述的更改吗？

什么是“Header.css”？

这段代码有什么用？

import styles from './Header.css' 

的文件名是styles.css的如ExtractTextPlugin提及。

您应该直接在HTML中包含“statics/styles.css”文件。

另外，这里

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> 
) 
} 

ExtractTextplugin的目标是，以产生可单独用作一般情况下，单独单CSS文件。