Pakiet Web Pack nie ładuje się css

Question

To jest moja pierwsza próba skonfigurowania Webpacka, więc jestem pewien, że czegoś tutaj brakuje.

Próbuję załadować moje pliki PostCSS z Webpack, używając ExtractTextPlugin do wygenerowania pliku css do "dist". Problem polega na tym, że Webpack nie zbiera plików css. Są pod "klientem/stylem", ale próbowałem przenieść je do "udostępnionego", z tym samym wynikiem.

Uruchomiłem pakiet Webpack za pomocą opcji --display-modules i zweryfikowałem, że nie są tam wyświetlane żadne pliki CSS.

Próbowałem uruchomić go bez wtyczki tekstu wyodrębnionego, a wynik jest taki sam: nie ma CSS wbudowany w bundle.js.

Oto moja 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' ] }) 
    ] 
}; 

A oto przykład z moim głównym pliku CSS: @import 'normalize.css/normalizować';

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

/* Mixins */ 

/* App */ 

/* Components */ 

body { 
    background-color: $black; 
} 

Czy ktoś ma pomysł, dlaczego tak się dzieje? Czy czegoś brakuje?

Dziękuję

Answer 1

Ponieważ używasz programu ładującego style i programu ładującego css. Możesz dołączyć css do samego pliku js. Możesz po prostu require(style.css) lub import(if es6) plik css w pliku javascript, który używa stylów. Nie ma potrzeby podawania punktu dostępu do pakietu internetowego dla css.

Mam nadzieję, że to pomaga.

Answer 2

Tak więc, po trzech godzinach uderzanie głową o ścianę, ale w końcu dostał. Mam nadzieję, że to pomoże komuś w przyszłości.

Wszystko, co musiałem zrobić, to dodać './client/styles/main.css' do punktów wejścia. Yey.