在 React 服务器端渲染时 CSS-Module 类未定义答案

【问题标题】：CSS-Module classes are undefined while React server side rendering在 React 服务器端渲染时 CSS-Module 类未定义
【发布时间】：2020-01-08 09:06:21
【问题描述】：

我没有为 React SSR 使用 Webpack 配置。相反，这是我的配置：

require("@babel/register")({
  presets: ["@babel/preset-env", "@babel/preset-flow", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-dynamic-import-node",
    "@babel/plugin-transform-modules-commonjs",    
    [
      "module-resolver",
      {
        root: ["./src"]
      }
    ]
  ]
});

require("ignore-styles");

module.exports = require("./server.js");

问题是 css 类在呈现的 html 中未定义。我该如何解决这个问题？

【问题讨论】：

标签： reactjs server-side-rendering css-modules babel-register

【解决方案1】：

我终于把这个插件加到babel了：

[
  "css-modules-transform",
  {
    camelCase: true,
    extensions: [".css", ".scss"],
    preprocessCss: "./ssr/utils/SsrCssModuleHandler.js",
    generateScopedName: "[hash:base64:5]"
  }
]

其中 SsrCssModuleHandler 是一个模块：

    var sass = require('node-sass');

    var path = require('path');

    module.exports = function processSass(data, filename) {
        var result;
        result = sass.renderSync({
            data: data,
            file: filename
        }).css;
        return result.toString('utf8');
    };

问题就解决了！

【讨论】：

【解决方案2】：

上面的配置是针对只处理 JS 的 Babel。如果你想在没有 webpack 的情况下使用 CSS 模块，那么你仍然需要将你的 CSS 处理成可以在 bowsers 中使用的格式。

最好的 css 处理器叫做 PostCSS，它们是一个支持 CSS-Module 的插件

https://github.com/css-modules/postcss-modules

【讨论】：