Реагирование на стороне сервера CSS-модулей

Текущая практика для CSS с компонентами React, похоже, использует загрузчик стиля webpack, чтобы загрузить его на страницу.

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

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

Таким образом, стильный загрузчик введет элемент <style> в DOM. Тем не менее, <style> не будет находиться в виртуальной DOM, поэтому, если сделать рендеринг на стороне сервера, <style> будет опущен. Это приведет к тому, что страница FOUC.

Есть ли какие-либо другие способы загрузки модулей CSS, которые работают как на стороне сервера, так и на стороне клиента?

Ответы

Ответ 1

Вы можете посмотреть isomorphic-style-loader. Загрузчик был специально создан для решения таких проблем.

Однако для этого вы должны использовать метод _insertCss(), предоставляемый загрузчиком. В документации подробно описано, как ее использовать.

Надеюсь, что это помогло.

Ответ 2

Вы можете использовать webpack/extract-text-webpack-plugin. Это создаст независимо распространяемую таблицу стилей, которую вы можете ссылаться затем из ваших документов.

Ответ 3

Для меня я использую css-загрузчик Webpack loader для реализации модулей CSS в изоморфном приложении.

На стороне сервера конфигурация webpack будет выглядеть так:

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

На стороне клиента конфигурация webpack выглядит следующим образом

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

Конечно, если вы используете SASS, вам нужно использовать sass-loader для компиляции scss в css, а postcss-loader может помочь добавить autoprefixer.