web-dev-qa-db-ja.com

WebpackがCSSをロードしていません

Webpackをセットアップしようとするのはこれが初めてなので、ここで何かが欠けていると確信しています。

ExtractTextPluginを使用してcssファイルを「dist」に生成し、WebpackでPostCSSファイルをロードしようとしています。問題は、Webpackがcssファイルを取得しないように見えることです。それらは「クライアント/スタイル」の下にありますが、私はそれらを「共有」に移動してみましたが、同じ結果になりました。

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

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

ここに私の製品構成があります：

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/normalize';

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

なぜこれが起こっているのか、誰にもアイデアがありますか？何か不足していますか？

ありがとうございました

javascriptcsswebpackpostcss
17
Claudia

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

それが役に立てば幸い。

12
sandeep

だから、3時間頭を壁にぶつけた後、ついに手に入れました。これが将来誰かを助けることを願っています。

私がする必要があるのは、'./client/styles/main.css'エントリポイントに。うん.

30
Claudia