CSS - классы модулей не определены при рендеринге на стороне сервера React - PullRequest
Новая
       30

CSS - классы модулей не определены при рендеринге на стороне сервера React

3 голосов
/ 08 января 2020

Я не использую конфигурацию 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");

Проблема в том, что css классы не определены в отображаемом html. Как я могу это исправить?

Ответы [ 2 ]

4 голосов
/ 05 февраля 2020

Я наконец добавил этот плагин в 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');
    };

и проблема решена!

0 голосов
/ 01 февраля 2020

Приведенный выше конфиг предназначен для Babel, который будет обрабатывать только JS. Если вы хотите использовать CSS -модули без веб-пакета, вам все равно нужно обработать CSS в формат, который работает в баузерах.

Лучший css процессор называется Post CSS и это плагин для поддержки CSS -Module

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

...