webpack, sass, react-css-modules — окно ReferenceError не определено

Я использую webpack и React с модулями react-css и файлами scss. Когда я пытаюсь построить, он выдает ошибку в каждом файле, который импортирует файлы scss -

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

Я гуглил целых полтора дня и ничего не нашел! Пожалуйста помоги!

Вот мой настроенный веб-пакет:

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

Заранее спасибо!


webpack css-modules sass react-css-modules webpack-dev-server
person ggilberth    schedule 15.06.2016    source источник
comment
Что нужно удалить, чтобы избавиться от ошибки? Можете ли вы настроить отдельный пример?   -  person Juho Vepsäläinen    schedule 16.06.2016
comment
Мне нужно избавиться от плагина извлечения текста. Я пробовал несколько способов редактирования ввода, включая плагин для объединения загрузчиков, поскольку он принимает только строку   -  person ggilberth    schedule 16.06.2016
comment
Можете ли вы попробовать передать второй параметр extract только в виде строки?   -  person Juho Vepsäläinen    schedule 16.06.2016
comment
Я уже пробовал это, и это все еще не сработало :(   -  person ggilberth    schedule 16.06.2016
comment
Привет! Я не знаю, поможет ли это вам, но это касается вашей темы. Взгляните: stackoverflow.com/questions/28223040/   -  person PDXIII    schedule 21.06.2016
comment
Я также получаю эту ошибку для ПК   -  person Nikos    schedule 01.12.2016

Ответы (2)


arrow_upward
5
arrow_downward

Этот вопрос продолжает появляться, когда я пытался устранить ту же ошибку для Webpack 2, scss, extracttextplugin и реагировать. Следующее сработало для меня.

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

Надеюсь это поможет.

person SILENT    schedule 16.04.2017

arrow_upward
0
arrow_downward

Я думаю, вам нужно изменить его на это, второй параметр идет как строка, а не как массив. Также удалено повторное использование загрузчика стилей.

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