2016-01-23 10 views
5

これは初めてWebpackをセットアップしようとしているので、ここで何か不足していると思います。Webpack not loading css

ExtractTextPluginを使用してWebpackでPostCSSファイルを読み込み、「dist」にCSSファイルを生成しようとしています。問題はWebpackがcssファイルを受け取っていないようだということです。彼らは "クライアント/スタイル"の下にありますが、私は同じ結果でそれらを "共有"に移動しようとしました。

Webpackを--display-modulesオプションで実行し、そこにcssファイルが表示されていないことを確認しました。

私は抽出テキストプラグインなしで実行しようとしましたが、結果は同じです:bundle.jsにはCSSが組み込まれていません。ここで

は私の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' ] }) 
    ] 
}; 

そして、ここに私のメインのCSSファイルの例です: @import '/正規normalize.css';

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

/* Mixins */ 

/* App */ 

/* Components */ 

body { 
    background-color: $black; 
} 

これはなぜ起こっているのでしょうか?何か不足していますか?

は壁に頭を打つの3時間後、私はついにそれを得た、あなたに

答えて

8

あなたはスタイルローダーとCSSローダーを使用しているので、 jsファイル自体にcssを含めることができます。スタイルを使用しているjavascriptファイルには、require(style.css)またはimport(if es6)のcssファイルを使用できます。 CSSのためにwebpackへのエントリポイントを提供する必要はありません。

希望します。

+0

チップをありがとうございます。 :)私の場合、私は同形アプリケーションを扱っているので、JSの前にロードするスタイルが必要です。そうでなければ、FOUCがあります。しかし、他の状況ではそのことを念頭に置いています。 – Claudia

+0

次に、 'isomorphic style loader'を見て、FOUCの問題を解決します。同形アプリのスタイルローダーの拡張です。 – sandeep

+0

ありがとう、ありがとう! – Claudia

17

ありがとうので。私はこれが将来誰かを助けることを願っています。

私がする必要があったのは、エントリポイントに'./client/styles/main.css'を追加することでした。 Yey。

+1

ありがとうございます!私はあなたを見つける前に数時間を無駄にしました! –