React SSR项目中导入react-toastify CSS文件报错求助

这个问题我之前碰到过好几次，核心原因是服务器端的Webpack配置用了style-loader——style-loader是专门给浏览器用的，它会把CSS代码插入到浏览器的DOM里，但Node.js环境既没有window、document这些DOM对象，也没法直接解析CSS的语法（比如.Toastify__toast-container这种类选择器），所以服务器端打包时一碰到CSS文件，就会抛出那个Unexpected token .的语法错误。

下面给你两种靠谱的修复方案，选一种适合你的就行：

1. 最简单的方案：用null-loader直接忽略服务器端的CSS文件 #

服务器端根本不需要处理样式渲染，最终样式都是由浏览器端的bundle来加载的，所以直接让服务器打包时跳过CSS文件就好。

• 先装一下null-loader：

npm install null-loader --save-dev

• 然后修改你的服务器端Webpack配置，把原来的CSS规则换成这个：

var serverConfig = {
  // ... 其他配置都不动
  module: {
    rules: [
      { test: /\.(js)$/, exclude: /node_modules/, use: ["babel-loader"] },
      // 替换掉原来的CSS处理规则
      { test: /\.(s?)css$/, use: ["null-loader"] }
    ]
  },
  // ... 其他配置都不动
};

2. 进阶方案：用css-loader/locals保留CSS模块化映射（如果用了CSS模块化） #

要是你的项目里用了CSS模块化，需要保留类名的映射关系，可以用css-loader的exportOnlyLocals选项，这样服务器端只会保留类名，不会尝试生成样式：

• 不需要额外装包，直接修改服务器端的CSS规则：

var serverConfig = {
  // ... 其他配置都不动
  module: {
    rules: [
      { test: /\.(js)$/, exclude: /node_modules/, use: ["babel-loader"] },
      { 
        test: /\.(s?)css$/, 
        use: [
          {
            loader: "css-loader",
            options: {
              modules: {
                exportOnlyLocals: true,
              },
            },
          },
        ]
      }
    ]
  },
  // ... 其他配置都不动
};

最后别忘了浏览器端配置保持原样 #

浏览器端的Webpack配置不用改，继续用style-loader和css-loader就行，毕竟浏览器能正常处理DOM注入，不影响react-toastify的样式显示。

改完配置后重新跑一下打包命令，那个语法错误应该就消失了，react-toastify的提示也能正常显示啦。

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