Die derzeitige Praxis für CSS mit React-Komponenten scheint darin zu bestehen, den Style-Loader von Webpack zu verwenden, um ihn in die Seite in zu laden.

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

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

Auf diese Weise fügt der Style-Loader ein <style> -Element in das DOM ein. Das <style> befindet sich jedoch nicht im virtuellen DOM. Wenn Sie also serverseitig rendern, wird das <style> weggelassen. Dies führt dazu, dass die Seite FOUC enthält.

Gibt es andere Methoden zum Laden von CSS-Modulen, die sowohl auf Server- als auch auf Clientseite funktionieren?

34
willwill 5 Jän. 2016 im 18:57

3 Antworten

Beste Antwort

Sie können sich den isomorphic-style-loader ansehen. Der Lader wurde speziell entwickelt, um diese Art von Problemen zu lösen.

Um dies zu verwenden, müssen Sie jedoch eine vom Loader bereitgestellte _insertCss() -Methode verwenden. In der Dokumentation wird die Verwendung beschrieben.

Hoffe es hat geholfen.

9
Community 20 Juni 2020 im 09:12

Sie können webpack/extract-text-webpack-plugin verwenden. Dadurch wird ein unabhängig weiterverteilbares Stylesheet erstellt, auf das Sie dann aus Ihren Dokumenten verweisen können.

11
Filip Dupanović 6 Jän. 2016 im 09:22

Für mich verwende ich den Webpack-Loader CSS-Loader, um CSS-Module in isomorph zu implementieren Anwendung.

Auf der Serverseite sieht die Webpack-Konfiguration folgendermaßen aus:

  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]'
            }
          },
        ],
      },
    ]
  }

Auf der Clientseite sieht die Webpack-Konfiguration folgendermaßen aus

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

Wenn Sie SASS verwenden, müssen Sie natürlich sass-loader verwenden, um scss zu css zu kompilieren, und postcss-loader kann beim Hinzufügen von autoprefixer helfen.

3
Eric Tan 13 Juni 2019 im 23:44