web-dev-qa-db-fra.com

React Rendu côté serveur des modules CSS

La pratique actuelle pour CSS avec les composants React semble utiliser le chargeur de style de webpack pour le charger dans la page.

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

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

En faisant cela, le chargeur de style injectera un <style> élément dans le DOM. Cependant, le <style> ne sera pas dans le DOM virtuel et donc si vous effectuez un rendu côté serveur, le <style> sera omis. Cela fait que la page a FOUC .

Existe-t-il d'autres méthodes de chargement modules CSS qui fonctionnent à la fois côté serveur et côté client?

reactjswebpackwebpack-style-loader
25
willwill

Vous pouvez jeter un œil au chargeur de style isomorphe . Le chargeur a été spécialement créé pour résoudre ce type de problèmes.

Cependant, pour l'utiliser, vous devez utiliser une méthode _insertCss() fournie par le chargeur. La documentation détaille comment l'utiliser.

J'espère que cela a aidé.

6
sandeep

Vous pouvez utiliser webpack/extract-text-webpack-plugin . Cela créera une feuille de style redistribuable indépendamment que vous pourrez ensuite référencer à partir de vos documents.

11
Filip Dupanović

Pour moi, j'utilise le chargeur Webpack css-loader pour implémenter des modules CSS dans une application isomorphe.

Côté serveur, la configuration du webpack sera comme ceci:

  module: {
    rules: [
      {
        test: /\.(css)$/,
        include: [
          path.resolve(__dirname, '../src'),
        ],
        use: [
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader/locals',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },
        ],
      },
    ]
  }

Côté client, la configuration du webpack ressemble à ceci

          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },

Bien sûr, si vous utilisez SASS, vous devez utiliser sass-loader pour compiler scss en css, et postcss-loader peut aider à ajouter le autoprefixer.

0
Eric Tan