react-toastify/dist/ReactToastify.css 模块解析失败。Toastify__toast-container { |反应 SSR答案

【问题标题】：Error in react-toastify/dist/ReactToastify.css Module parse failed .Toastify__toast-container { | React SSRreact-toastify/dist/ReactToastify.css 模块解析失败。Toastify__toast-container { |反应 SSR
【发布时间】：2019-11-19 21:28:28
【问题描述】：

当我在 react-toastify npm 模块和服务器端渲染中使用 Error 时出现错误。 toastify/dist/ReactToastify.css 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。 |

Error:

 .Toastify__toast-container { | z-index: 9999; | position: fixed;

ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .Toastify__toast-container {
| z-index: 9999;
| position: fixed;

【问题讨论】：

标签： reactjs webpack webpack-style-loader react-ssr

【解决方案1】：

当服务器端渲染时，我们应该在服务器端和客户端都配置样式加载器，就像

server-side webpack js Example
webpack.server.config.js or  webpack.prod.config.js
client-side js
webpack.client.config.js or  webpack.client.config.js

或者我们可以创建基本的 webpack 配置，我们可以在客户端和服务器端合并它

** OR ****
webpack.base.config.js

我在 webpack.server.config.js / webpack.prod.config.js 和 webpack.client.config.js / webpack.client.config.js 中都包含了我的配置

npm install sass-loader style-loader css-loader import-glob-loader

我的决赛

webpack.base.config.js

module: {
rules: [

  {
    test: /\.s?css$/,
    exclude: [resolvePath('../src/styles')],
    use: [
      {
        loader: 'css-loader',
        options: {
          localsConvention: 'camelCase',
          modules: true
        }
      },
      'sass-loader',
      'import-glob-loader'
    ]
  },
  { 
    test: /\.css$/,
    use: ['style-loader', 'css-loader'] 
  }
]

【讨论】：

【解决方案2】：

在导入 Toastify css 之前将以下内容添加到 tsx 文件似乎对我有用。如果我发现这不起作用，我会更新，但到目前为止它已编译。

require.extensions['.scss'] = () => {
  return;
};
require.extensions['.css'] = () => {
  return;
};

我找到了这个解决方案here。

【讨论】：