reactjs - 在 React 服务器端渲染时 CSS-Module 类未定义
问题描述
我没有为 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");
问题是呈现的 html 中未定义 css 类。我怎样才能解决这个问题?
解决方案
I finally added this plugin to babel:
[
"css-modules-transform",
{
camelCase: true,
extensions: [".css", ".scss"],
preprocessCss: "./ssr/utils/SsrCssModuleHandler.js",
generateScopedName: "[hash:base64:5]"
}
]
in which SsrCssModuleHandler is a module:
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');
};
and the problem is solved!
推荐阅读
- arm - 使用哪个 ARM Cortex M 产品线?
- android-camera - 我的 onDestroy 有什么问题?(旧 api 相机)
- javascript - 跨 Safari 和 iOS 加载图像的 getJSON 问题
- c# - 使用 EF Core 2.1 检查表是否存在
- php - 在没有独立服务器的情况下使用 Selenium
- arrays - 是否有类似于 Vector 和其他语言的 Haskell Repa 切片函数的使用?
- node.js - Angular 7 应用程序从 Angular 客户端获取 CORS 错误
- c++ - 从 C++ 中的函数返回值初始化引用时,调用堆栈的外观如何?
- python - 如何获取今天之前 n 个工作日的日期时间
- css - 通过 SASS 按 id 访问 HTML