問題タブ [isomorphic-style-loader]

style-loader私の目標は、CSS をサーバー側と同様に、またはプラグインがクライアント側で行う方法とまったく同じスタイル タグにレンダリングすることです。style-loaderDOM に直接書き込み、DOM が Node.js に存在しないため、これが不可能であることはわかっています。

現在、私は ExtractTextPlugin を使用していますが、すべての CSS を 1 つの大きなファイルにコンパイルしないと、サーバーで Webpack を実行して完全にコンパイルしない限り、ページの読み込み時にいくつかのスタイルが失われます。

ページをレンダリングするこのコードがあります：

サーバー.jsx

render-full-page.jsx

次のように、React モジュールで必要なときにスタイルをグローバルにインポートしています。

そして、CSS のロード方法を変更して、すべての CSS を var に入れ、ループして<style>タグを同じように出力できるようにしたいと思いますstyle-loader。

これはWebpackで可能ですか? これを行うことができるようなプラグインはありisomorphic-style-loaderますか? もしそうなら、どのようにコードを変更しますか?

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

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

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

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

isomorphic-style-loader を使用して webpack を構成しようとしていますが、次のメッセージが引き続き表示されます。(私は同形を使用する必要はあまりないので、これを行うためのより簡単な方法があれば、変更してもかまいません)。私が必要としているのは、scss ファイルのスコープです。

失敗したコンテキスト タイプ: 必要なコンテキストinsertCssが で指定されていませんでしたWithStyles(Logo)。のレンダリング方法を確認してくださいHeader。

これが私のwebpack.conf.jsです：

ここに私のエントリポイント（main.js）があります：

ここに私のルート（routes.js）があります：

エラーがスローされたファイル (Logo.js):

import ReactRouter, { withRouter, Link } from 'react-router'; import React, { Component, PropTypes } from 'react'; 'isomorphic-style-loader/src/withStyles' から withStyles をインポートします。'./Logo.scss' から s をインポートします。

含めようとしているcss（Logo.scss）：

withStyles(s)(Logo) の行を変更すると、テンプレートはレンダリングされますが、css はありません。問題は、Logo クラスのコンテキストで insertCss というメソッドが必要であることだと確信していますが、そこに到達する方法や、そのメソッドがどのように見えるべきか正確にはわかりません。どんな助けでも大歓迎です。