問題タブ [webpack-style-loader]

Webpack のホームページは、すべてのスタイルシートと依存関係を 1 つの CSS ファイルにコンパイルすると主張していますが、これは誤解を招きます。CSS 用に別のローダーが必要なだけでなく、代わりに、埋め込まれた CSS 文字列を読み込んで適用する JS ファイルとして出力します。

なぜ長いルートを取るのですか？そうするのには正当な理由があるはずですよね？

(テキスト抽出プラグインは知っていますが、それはデフォルトの動作ではありません。)

JavaScript は同期的に実行されるため、できるだけ早くコンテンツを表示するとペナルティが課せられるのではないでしょうか? また、スタイルが最終的に読み込まれて適用される前に、スタイルが設定されていないページが短時間表示されることがあります。

単純な CSS ファイルで問題ないのに、なぜ自分のスタイルを JS 経由でロードする必要があるのでしょうか。

これがあなたの SCSS だとしましょう:

そして、これはあなたがそれを使用する方法です：

したがって、これはうまく機能します。

クラスに名前を付ける必要がある場合はどうなりますsome-classか? 明らかclassName={s.some-class}に機能せず、どちらも機能しませんclassName={s.someClass}(何も起こりません)。

https://github.com/shama/stylus-loader

Webpack-dev-server で次のエラーが表示されます。

そのため、正しく構成されていないstylus-loaderか、問題があるようです。

ファイル構造

Webpack 構成

header.styl

ヘッダー.jsx

いくつかの変更を加えることで、通常の CSS を機能させることができます。

ファイル構造header.stylに名前を 変更header.css

Webpack 構成

header.styl

ヘッダー.jsx

ノード モジュール

私はに基づいて同形Reactアプリを書いています:

https://github.com/choonkending/react-webpack-node

例で使用されている css モジュールの代わりに、scss を使用したいと思います。そして、何らかの理由で、それらを機能させるのに非常に苦労しています。私の最初のステップは、サーバーとクライアントの両方の構成から webpack ローダーを削除し、それらcssを固有のローダーに置き換えることでした (および を削除します):scsspostcss

しかし、これはReferenceError: window is not defined、スタイルローダーとしてビルドすることが明らかにサーバー側のレンダリングに適していない場合にスローされます。そこで、次のアイデアは を使用することでしたisomorphic-style-loader。私が理解している限り、それを機能させるには、コンポーネントを高次コンポーネントで装飾する必要がありますwithStyles。

次に、サーバー上のコード レンダリング ページでトリックを行います。しかし問題は、パッケージ ドキュメントの例では、Express 内で発生するフラックス アクション ( https://libraries.io/npm/isomorphic-style-loader#webpack-configuration ) と、使用しているボイラープレートがreact-router. insertCssしたがって、このオブジェクトをコンテキストにどのように挿入する必要があるかについて、私はちょっと迷っています。私はこれを試しました：

しかし、私はまだWarning: Failed context type: Required context 'insertCss' was not specified in 'WithStyles(App)'.これに取り組む方法を考えていますか? さらに重要なことは、それを行うためのより簡単な方法はありませんか? これは多くの追加作業のようです。

これは私のwebpack構成ファイルです：

そして、ここに私が受け取っているエラーメッセージがあります:

さて、Object.assign はそのままでは利用できないことを認識しているので、ご覧のとおり、プラグイン「babel-transform-object-assign」を追加してみました (ここで説明したように: https://github .com/react-toolbox/react-toolbox/issues/45 )、core-js ( https://github.com/zloirock/core-js#commonjs )、および babel-core から要求してみました、および「ランタイム」オプションなどとして。Postcss が問題を引き起こしたようですが、私はすでにそれをダウングレードしました。

sass loader の問題を修正しようとはまだ思っていません。Object.assign の問題を解決してから始めようと思っていました。どこにも行きません。そのため、誰かが私を正しい方向に向けることができることを期待して、両方のエラーメッセージを追加しました.

古い構文と新しい構文などを混同したのではないかと思いますが、これは本当にわかりません...助けて??

画像を読み込もうとしています：

私のstyle.scssで、それが機能していません

これが私のwebpack.configです：

ファイルローダーを使用していますが、ブラウザでレンダリングされた URL が画像の URL と一致しません。

ソースマップを使用していないと思います: https://github.com/webpack/style-loader/issues/55

誰でも助けることができますか？