Question

使用React组件的CSS的当前做法似乎是使用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-loader将向<style>元素注入一个元素。但是，<style>不在虚拟DOM中，因此如果进行服务器端渲染，则<style>将被省略。这会导致页面有FOUC。

是否还有其他方法可以在服务器端和客户端加载CSS modules？

Answer 1

您可以使用webpack/extract-text-webpack-plugin。这将创建一个可以从文档中引用的独立可再发行的样式表。

Answer 2

您可以查看isomorphic-style-loader。加载程序是专门为解决此类问题而创建的。

但是，要使用此功能，您必须使用加载程序提供的_insertCss()方法。该文档详细说明了如何使用它。

希望它有所帮助。

Answer 3

对我来说，我正在使用Webpack加载器css-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。

对CSS模块进行React Server端渲染

3 个答案: