[CSS模块类在React服务器端渲染时未定义

Question

bounty到期在3天内。该问题的答案有资格获得+ 50声望赏金。Hadi Ranjbar正在寻找规范答案。

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

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");

问题是在渲染的html中未定义css类。我该如何解决？

Answer 1

上面的配置用于Babel，它将仅处理JS。如果要使用不带webpack的CSS模块，那么仍然需要将CSS处理为可以在Bowsers中使用的格式。

最佳的CSS处理器称为PostCSS，它们是CSS模块支持的插件

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

Answer 2

我终于将此插件添加到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');
    };

问题已解决！