8

Ich benutze webpack und reagiere mit react-css-modules und scss-dateien. Wenn ich versuche, und bauen es mir ein Fehler auf jede Datei gibt, die SCSS Dateien importiert - keine wowebpack, sass, react-css-modules - ReferenceError window ist nicht definiert

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

Ich habe gegoogelt für einen festen und einen halben Tag und haben! Bitte helfen Sie!

Hier ist mein webpack ein:

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

Vielen Dank im Voraus!

+0

Was müssen Sie entfernen, um den Fehler zu beheben? Können Sie ein eigenständiges Beispiel einrichten? –

+0

Ich muss das Extract Text Plugin loswerden. Ich habe mehrere Möglichkeiten versucht, die Eingabe zu bearbeiten, einschließlich eines Plugins zum Kombinieren von Loadern, da es nur eine Zeichenkette akzeptiert. – ggilberth

+0

Können Sie versuchen, den zweiten Parameter von 'extract' nur als String zu übergeben? –

Antwort

0

Ich denke, Sie müssen es zu diesem ändern, der zweite Parameter wird als String anstelle von Array. Außerdem wurde die wiederholte Verwendung des Style-Loaders entfernt.

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

Diese Frage taucht immer wieder auf, wenn ich den gleichen Fehler für Webpack 2, SCSS, extracttextplugin und reagieren zu lösen versucht. Das Folgende funktionierte für mich.

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

Hoffe, das hilft.