窗口未定义（ 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"

---

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

注意：该项目使用反应服务器端，我使用 2 个重要文件进行渲染。一种用于客户端，一种用于服务器端。并且也redux被使用。

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

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

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

感谢您的指导。

Answer 1

这就是样式加载器的作用：

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

& 这就是 ExtractTextWebpackPlugin 的作用：

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

您可能永远不需要在一个地方同时执行这两项操作，但是当 ExtractTextWebpackPlugin 失败时，将内联作为后备措施是很棒的。

window没有定义，因为在 CSS 提取过程中没有定义。那么你可以尝试这个：

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