[英]CSS-Module classes are undefined while React server side rendering
I am not using Webpack config for React SSR.我没有将 Webpack 配置用于 React SSR。 Instead this is my config:
相反,这是我的配置:
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");
The problem is css classes are undefined in the rendered html.问题是 css 类在呈现的 html 中未定义。 How can I fix this?
我怎样才能解决这个问题?
I finally added this plugin to babel:我终于在 babel 中添加了这个插件:
[
"css-modules-transform",
{
camelCase: true,
extensions: [".css", ".scss"],
preprocessCss: "./ssr/utils/SsrCssModuleHandler.js",
generateScopedName: "[hash:base64:5]"
}
]
in which SsrCssModuleHandler is a module:其中 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');
};
and the problem is solved!问题解决了!
The above config is for Babel which is only going to process JS.上面的配置是针对只处理 JS 的 Babel。 If you want to use CSS-modules without webpack, then you still need to process your CSS into a format that works in the bowsers.
如果你想在没有 webpack 的情况下使用 CSS 模块,那么你仍然需要将你的 CSS 处理成可以在 bowsers 中使用的格式。
The best css processor is called PostCSS and their is a plug-in for CSS-Module support最好的 css 处理器叫做 PostCSS,它们是一个支持 CSS-Module 的插件
https://github.com/css-modules/postcss-modules https://github.com/css-modules/postcss-modules
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.