35

React コンポーネントを使用した CSS の現在のプラクティスは、webpack の style-loader を使用してページにロードしているようです。

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

これにより、style-loader は<style>要素を DOM に挿入します。ただし、<style>は仮想 DOM には含まれないため、サーバー側のレンダリングを行う場合、<style>は省略されます。これにより、ページにFOUCが発生します。

サーバー側とクライアント側の両方で動作するCSS モジュールをロードする他の方法はありますか?

4

3 に答える 3

12

使用できますwebpack/extract-text-webpack-plugin。これにより、ドキュメントから参照できる個別に再配布可能なスタイルシートが作成されます。

于 2016-01-06T09:22:24.217 に答える
9

isomorphic-style-loaderを見ることができます。ローダーは、この種の問題を解決するために特別に作成されました。

ただし、これを使用するに_insertCss()は、ローダーが提供するメソッドを使用する必要があります。ドキュメントには、その使用方法が詳しく説明されています。

それが役に立ったことを願っています。

于 2016-01-18T18:42:28.973 に答える