8

J'utilise webpack et réagit avec les modules reac-css et les fichiers scss. Lorsque je tente de construire, il me donne une erreur sur tous les fichiers qui importe les fichiers SCSS -webpack, sass, react-css-modules - La fenêtre ReferenceError n'est pas définie

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

Je googlé pour une journée solide et demi et ont obtenu pas où! S'il vous plaît aider!

Voici mon webpack mis en place:

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

Merci à l'avance!

+0

Que devez-vous supprimer pour vous débarrasser de l'erreur? Pouvez-vous configurer un exemple autonome? –

+0

Je dois me débarrasser du plugin de texte d'extrait. J'ai essayé plusieurs façons d'éditer l'entrée, y compris un plugin pour combiner les chargeurs car il n'accepte qu'une chaîne – ggilberth

+0

Pouvez-vous essayer de passer le second paramètre de 'extract' en tant que chaîne seulement? –

Répondre

0

Je pense que vous devez le modifier, le deuxième paramètre va comme une chaîne au lieu de tableau. Également supprimé l'utilisation répétée du chargeur de style.

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

Cette question ne cesse d'apparaître quand j'ai essayé de résoudre la même erreur pour Webpack 2, SCRT, extracttextplugin et réagir. Ce qui suit a fonctionné pour moi.

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

Espérons que cela aide.