これは初めて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時間後、私はついにそれを得た、あなたに
チップをありがとうございます。 :)私の場合、私は同形アプリケーションを扱っているので、JSの前にロードするスタイルが必要です。そうでなければ、FOUCがあります。しかし、他の状況ではそのことを念頭に置いています。 – Claudia
次に、 'isomorphic style loader'を見て、FOUCの問題を解決します。同形アプリのスタイルローダーの拡張です。 – sandeep
ありがとう、ありがとう! – Claudia