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

Question

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

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

尝试修复和实验：

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

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

Answer 1

事实证明，修复程序是在我们的服务器app.js文件中使用ignore-styles包：

require('ignore-styles')

回购中列出的描述：

  

在Node中运行时忽略样式导入的babel / register样式挂钩。这适用于使用类似Webpack的项目来启用JavaScript中的CSS导入。