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

Question

我正在使用webpack和React与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和反应解决相同的错误时,这个问题不断出现.以下对我有用.

{ 
    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')