webpack，sass，react-css-modules - ReferenceError窗口未定义

Question

我使用的是webpack，使用react-css-modules和scss文件进行反应。当我尝试构建它时，它在导入scss文件的每个文件上都会出现错误-

ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined

我用谷歌搜索了整整一天半，却一无所获！请帮帮我！

这是我的webpack设置：

var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: __dirname + '/dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    watchOptions: {
        poll: true
    },
    module: {
        preLoaders: [
            {
                test: /\.jsx$|\.js$/,
                loader: 'eslint-loader',
                include: __dirname + '/assets',
                exclude: /bundle\.js$/
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', ['style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded'])
            }
        ]
    },
    postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false }
        })
    ] : [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin("styles.css", {
            allChunks: true
        })
    ]
};

提前感谢！

Answer 1

当我试图为Webpack 2、scss、extracttextplugin和react解决同样的错误时，这个问题一直出现。下面的方法对我很有效。

{ 
    test:/\.scss$/,
    use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]}),
    include:path.join(__dirname,"client/src"),
},

希望这能有所帮助。

Answer 2

我想你必须把它改成这样，第二个参数是字符串而不是数组。还删除了样式加载器的重复使用。

loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')