通过 Webpack 导入 CSS 无法重新加载页面答案

【问题标题】：CSS import via Webpack not working on reload of page通过 Webpack 导入 CSS 无法重新加载页面
【发布时间】：2022-01-03 20:06:51
【问题描述】：

我正在使用两个库（react-image-crop 和 react-responsive-carousel），每个库都需要一个 css 导入。我已将 css 加载器添加到 next.config.js 并且当页面最初加载时一切都很好。但是，当在页面上调用刷新时，会出现document is not defined 错误。此外，当我运行 yarn build 时，构建按预期编译，然后最终失败并出现 Reference Error 并引用此 document is not defined 错误。

任何帮助都会很棒。

next.config.js

...

const REACT_CAROUSEL_PATH = path.resolve(__dirname, './node_modules/react-responsive-carousel');
const REACT_IMAGE_CROP_PATH = path.resolve(__dirname, './node_modules/react-image-crop');

...

config.module.rules.push({
  test: /\.css$/i,
  include: [REACT_CAROUSEL_PATH, REACT_IMAGE_CROP_PATH], 
  use: [{
      loader: 'style-loader'
    },
    {
     loader: 'css-loader'
  }],
})

【问题讨论】：

没有mcve 这是一个猜谜游戏（如果我不得不猜测，那是因为这些包中的一个或两个不能在服务器端呈现，因为它们使用document 接口，即仅在客户端可用）。附带说明：您不应该使用自定义 Webpack 规则来导入全局 node_module css。相反，您可以在 _app.js pages file 或组件内使用 import 语句。
谢谢@MattCarlotta 我知道 mcve 和道歉。如果可能，将尝试使用更多代码更新帖子。在这里很难补充，但你的猜测是正确的。我尝试在组件和_app.js 中导入，但它给出了同样的错误。此外，库和其他堆栈帖子都建议使用 css webpack 加载器。我也尝试使用mini-css-extract-plugin 并获得this.getOptions 不是css 文件上的函数。我还尝试在组件安装时进行条件渲染，但仍然会出错，找不到文档。挠头。
该错误与 css 导入无关。相反，它与您正在使用的一个或多个第三方组件有关。请使用 NextJS dynamic import with no ssr 单独导入它们，这应该可以修复与未定义文档相关的错误。关于这一点，没有理由创建自定义 Webpack CSS 规则，因为它们在使用 recommended import statement for CSS 时已经由 Next 处理
是的，我知道这是第三方组件而不是进口。我将尝试动态加载，看看是否可以解决问题。
@MattCarlotta 当我卸下装载机时，我得到以下You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

标签： css reactjs webpack react-image-crop react-responsive-carousel

【解决方案1】：

感谢@MattCarlottta 帮助解决这个问题。如果其他人发现自己处于类似情况，请回答这个问题。对我来说，这与我为第三方 css 定制的 nginx 服务器响应类型有关。最后，我最终使用了一个符合 SSR 的库，以避免构建自定义页面处理。

【讨论】：