Warum ignoriert Webpack meine CSS-Dateien?

Question

Ich versuche, Webpack meine CSS-Dateien (mit PostCSS) in eine separate Datei zu kompilieren. Aus der Dokumentation geht hervor, dass ExtractTextPlugin genau das tun sollte. Ich kann Webpack jedoch nicht dazu bringen, irgendetwas mit meinen CSS-Dateien zu tun.

Die relevante Projektstruktur:

dist 
⎣js 
    ⎣bundle.js 
public 
⎣css 
    ⎣style.css* 
src 
⎣css 
    ⎣index.css 

* file doesn’t exist (hasn’t been created) 

webpack.config.babel.js

import webpack from 'webpack'; 
import path from 'path'; 

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 

import { WDS_PORT } from './src/shared/config'; 
import { isProd } from './src/shared/util'; 

export default { 
    entry: [ 
    'react-hot-loader/patch', 
    './src/client', 
    ], 
    output: { 
    filename: 'js/bundle.js', 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: isProd ? '/static/' : `http://localhost:${ WDS_PORT }/dist/`, 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader', 
       options: { 
       sourceMap: true, 
       importLoaders: 1, 
       }, 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
       sourceMap: 'inline', 
       }, 
      }, 
      ], 
     }), 
     }, 
    ], 
    }, 
    devtool: isProd ? false : 'source-map', 
    resolve: { 
    extensions: ['.js', '.jsx', '.css'], 
    }, 
    devServer: { 
    port: WDS_PORT, 
    hot: true, 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new ExtractTextPlugin('./public/css/style.css'), 
    ], 
}; 

Dies wird meinen Javascript glücklich richtig kompilieren, aber es hat nichts zu meinem CSS. Was läuft falsch und wie repariere ich es?

Answer 1

Webpack verarbeitet nur Dateien, die zu einem bestimmten Zeitpunkt importiert werden. Dies wird entweder als Einstiegspunkt angegeben oder in eine Datei importiert, auf die von einem Einstiegspunkt aus verwiesen wird. Die Regeln importieren keine Dateien, sie werden einfach angewendet, wenn ein Import den Test besteht (entspricht dem regulären Ausdruck in Ihrem Fall).

Sie müssen Ihr CSS wie jedes andere Modul importieren.

import './css/index.css'; 

Siehe auch Code Splitting - CSS.