窗口未定义（webpack和ReactJS）

Question

程序运行正确。但是当我将一个css文件导入到组件中时，遇到了以下错误。

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
    at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:57:46)
    at eval (webpack:///./public/testStyle.css?:12:134)
    at Object../public/testStyle.css (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:193:1)
    at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
    at eval (webpack:///./src/client/pages/HomeContainer.js?:31:1)
    at Object../src/client/pages/HomeContainer.js (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:541:1)
    at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
    at eval (webpack:///./src/client/Routes.js?:17:22)
[nodemon] app crashed - waiting for file changes before starting...

我在css-loader存储库中遇到了另一个问题，并提出了这个问题。运行后，我遇到了这个问题。

该项目有三个webpack文件之一是webpack.base.js文件，其内容如下：

'use strict';
// const isInProduction = process.env.NODE_ENV === 'production';
module.exports = {
    context: __dirname,
    module: {
        rules: [
            {
                test: /\.(pdf|ico|jpg|eot|otf|woff2|woff|ttf|mp4|webm)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'file-loader',
                    query: {name: '[name].[ext]'},
                },
            },
            {
                test: /\.js$/,
                exclude: /node-modules/,
                loader: 'babel-loader'
            },{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {modules: true, sourceMap: true}
                    }
                ]
            }
        ]
    }
};

同时需要翻译 .babelrc 文件的内容：

{
  "presets": [
    ["es2015", {"modules": false}],
    ["env", {
        "targets": {
          "browsers": ["last 2 versions"],
          "node":"current"
        }
      }
    ],["react"],"stage-0"
  ]
}

软件包版本：

"webpack": "^3.11.0", "style-loader": "^0.18.2", "css-loader": "^0.28.9"

---

在询问这个问题之前，我强调一下，我已经研究了与此问题相关的所有问题，但是我没有达到预期的结果。

注意：该项目使用React服务器端，并且我使用了两个重要的文件进行呈现，一个用于客户端，另一个用于服务器端。同时还使用了redux。

要查看项目文件的详细信息，我可以引用这里。

你知道这个问题的解决方案吗？

再次强调，我在解决这个问题之前已经做了很多研究，但没有达到预期的结果。

感谢您的指导。

- Ehsan.Fahami

Answer 1

这是style-loader的作用：

- 通过注入标签将CSS添加到DOM中。

而ExtractTextWebpackPlugin做的事情如下：

- 从一个或多个bundle中提取文本到单独的文件中。

你可能永远不需要在同一处同时使用两者，但当ExtractTextWebpackPlugin失败时内联作为备选方案非常好。

因为在CSS提取过程中没有任何窗口，所以"window"未定义。那么你可以尝试这样做：

{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader' ] }) },

- Fateme Fazli

---

感谢您的指导。问题是我想从任何地方导入CSS文件，例如从node_modules。这是您推荐的插件。获取所有CSS文件并将它们呈现在一个文件中。在这种情况下，该软件包可能仅使用其自己的CSS文件名。因此，我无法使用此软件包！是否有其他解决方案？我强调是从React服务器端。 - Ehsan.Fahami