通过Webpack导入不处理页面重新加载的CSS

Question

我使用两个库(react-image-crop和react-responsive-carousel)，每个库都需要一个css导入。我在next.config.js中添加了css加载器，当页面最初加载时，一切都很好。但是，当在页面上调用刷新时，会出现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'
  }],
})

Answer 1

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