webpack, sass, react-css-modules - ReferenceError window is not defined

Question

I'm using webpack and React with react-css-modules and scss files. When i try and build it gives me an error on every file that imports scss files -

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

I have googled for a solid day and a half and have got no where! Please help!

Here's my webpack set up:

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
        })
    ]
};

Thanks in advance!

Answer 1

This question keeps popping up when I tried to resolve the same error for Webpack 2, scss, extracttextplugin, and react. The following worked for me.

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

Hope this helps.