35

CSS 与 React 组件的当前做法似乎是使用 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>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 回答
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.

于 2019-06-13T23:44:49.057 回答