React服务端渲染(SSR)中CSS/SASS加载失败问题求助

为什么ts-node会报SyntaxError？ #

ts-node 默认仅能处理 JS/TS 文件，当代码中导入 .css/.scss 这类非脚本文件时，它无法解析文件内容，直接抛出语法错误。

无需Webpack的解决方案 #

1. 使用ignore-styles跳过样式导入 #

这个包能让 Node.js 直接忽略所有样式文件的导入，避免解析报错：

• 安装依赖：

  npm install ignore-styles --save-dev
  

• 在服务端入口文件（比如server.ts）最顶部添加：

  require('ignore-styles');
  

  若使用 ESModule 语法，可改为import 'ignore-styles'，部分场景需配置 tsconfig 允许 CommonJS 模块。

2. 用路径别名mock样式文件 #

通过 tsconfig 的路径映射，把所有样式导入指向一个空文件，让 ts-node 正常解析：

• 创建空文件empty.ts（内容留空即可）；
• 修改tsconfig.json，添加路径配置：

  {
    "compilerOptions": {
      // 其他配置...
      "paths": {
        "*.css": ["./empty.ts"],
        "*.scss": ["./empty.ts"]
      }
    }
  }
  

  所有样式导入会被替换成空模块，不会触发语法错误。

3. 自定义ts-node转换器（进阶） #

如果需要更灵活的处理，可以写一个简单的转换器，让 ts-node 遇到样式文件时返回空模块：

• 创建style-transformer.ts：

  import * as ts from 'typescript';
  
  export default function styleTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
    return (context) => {
      return (node) => {
        if (node.fileName.match(/\.(css|scss)$/)) {
          return ts.createSourceFile(
            node.fileName,
            'export default {};',
            ts.ScriptTarget.ESNext,
            false,
            ts.ScriptKind.JS
          );
        }
        return node;
      };
    };
  }
  

• 在tsconfig.json中配置转换器：

  {
    "ts-node": {
      "transformers": {
        "before": ["./style-transformer.ts"]
      }
    }
  }
  

让样式真正生效的补充步骤 #

上面的方法仅解决了 ts-node 的报错问题，要让服务端渲染的页面有样式，还需要：

• 用 SASS 命令行工具编译样式：

  npm install sass --save-dev
  sass src/styles/main.scss dist/main.css
  

• 在服务端生成的 HTML 模板中引入编译后的 CSS：

  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="/dist/main.css">
    </head>
    <body>
      <div id="root">{{reactHtml}}</div>
    </body>
  </html>
  

  全局样式可直接生效；若使用 CSS Modules，无 Webpack 的方案很难处理类名映射，建议考虑轻量构建工具或使用 Webpack 处理服务端代码。

内容的提问来源于stack exchange，提问作者nick2225