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。

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

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

我再次强调，在解决这个尚未达到预期效果的问题之前，我已经进行了大量研究。

感谢您的指导。

Answer 1

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

- 通过注入标记

将DOM添加到DOM

＆安培;这就是ExtractTextWebpackPlugin所做的：

- 将捆绑包或捆绑包中的文本提取到单独的文件中。

您可能永远不需要在一个地方同时进行这两项工作，但是当ExtractTextWebpackPlugin失败时，内联作为回退非常棒。

window未定义，因为在CSS提取过程中没有任何内容。然后你可以试试这个：

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

窗口未定义（webpack和reactJS）

1 个答案: