Webpack non in caricamento css

Question

Questa è la prima volta che cerco di configurare Webpack, quindi sono sicuro che mi manca qualcosa qui.

Sto cercando di caricare i miei file PostCSS con Webpack, utilizzando ExtractTextPlugin per generare un file css in "dist". Il problema è che Webpack non sembra raccogliere i file css. Sono sotto "client/stili", ma ho provato a spostarli in "condivisi", con lo stesso risultato.

Ho eseguito Webpack con l'opzione --display-modules e ho verificato che nessun file css lo visualizzava.

Ho provato a eseguirlo senza il plug-in di estrazione del testo e il risultato è lo stesso: nessun file CSS è incorporato in bundle.js.

Ecco il mio prod config:

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

module.exports = { 
    entry: [ 
    './client' 
    ], 
    resolve: { 
    modulesDirectories: ['node_modules', 'shared'], 
    extensions: ['', '.js', '.jsx', '.css'] 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    chunkFilename: '[id].js', 
    publicPath: '/' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['babel'] 
     }, 

     { 
     test: /\.css?$/, 
     loader: ExtractTextPlugin.extract(
      'style-loader', 
      'css-loader!postcss-loader' 
     ), 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('[name].css') 
    ], 
    postcss: (webpack) => [ 
    require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }), 
    require('postcss-url')(), 
    require('precss')(), 
    require('postcss-fontpath')(), 
    require('autoprefixer')({ browsers: [ 'last 2 versions' ] }) 
    ] 
}; 

Ed è un esempio di mio principale file css qui: @import 'normalize.css/normalizzare';

/* Variables */ 
@import 'variables/colours'; 

/* Mixins */ 

/* App */ 

/* Components */ 

body { 
    background-color: $black; 
} 

Qualcuno potrebbe avere un'idea del perché questo sta accadendo? Mi sto perdendo qualcosa?

Grazie

Answer 1

Poiché si utilizza il caricatore di stili e il css-loader. Puoi includere css nel file js stesso. È possibile solo il file require(style.css) o import(if es6) css nel file javascript che utilizza gli stili. Non è necessario fornire un punto di accesso al pacchetto web per css.

Spero che aiuti.

Answer 2

Così, dopo tre ore di sbattere la testa contro il muro, ho finalmente capito. Spero che questo possa aiutare qualcuno in futuro.

Tutto quello che dovevo fare era aggiungere './client/styles/main.css' ai punti di ingresso. Yey.