为啥我不能为我的 React 服务器端渲染应用导入 CSS 文件？

Posted 2023-02-22

【中文标题】为啥我不能为我的 React 服务器端渲染应用导入 CSS 文件？

【英文标题】：Why can't I import CSS files for my React server side rendering app?为什么我不能为我的 React 服务器端渲染应用导入 CSS 文件？

【发布时间】：2018-05-06 14:08:11

【问题描述】：

一般错误：SyntaxError: Invalid or unexpected token，引用 index.css 的第 1 行。

这是在我尝试为样式导入的 CSS 文件中遇到 CSS 语法的结果。

尝试的修复和实验：

从 CSS 文件中删除所有内容并导出一个空的 JS 模块。这有效，验证导入将其视为 JS 文件，而不是 CSS。 从 CSS 文件的第 1 行删除 @import 语句。当然，这并没有什么不同，因为剩下的 CSS 语法会抛出同样的错误。 配对了 Webpack 配置文件以消除问题的表面区域。渲染应该由 Webpack 处理，所以问题可能就在那里。 Config 非常基础，可以处理 CSS、SASS、JS 和 JSX。 尝试从其他文件位置导入 CSS 文件，包括服务器的 app.js 文件。 尝试使用 ExtractTextPlugin 作为捆绑替代方案。 尝试使用Isomorphic Style Loader。

总而言之，考虑到上面列出的尝试修复和测试，这个问题似乎与 Webpack 本身无关。就好像服务器端渲染在 Weback 介入之前尝试导入 CSS 文件一样。

【参考方案1】：

事实证明，解决方法是在我们的服务器 app.js 文件中使用 ignore-styles 包：

require('ignore-styles')

repo 中列出的描述：

在 Node.js 中运行时忽略样式导入的 babel/register 样式挂钩。这适用于使用 Webpack 之类的东西在 javascript 中启用 CSS 导入的项目。