8

Sto usando webpack e React con react-css-modules e scss files. Quando provo e costruirlo mi dà un errore su ogni file che importa i file SCSS -webpack, sass, react-css-modules - La finestra ReferenceError non è definita

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

Googled per un giorno solida e mezzo e ho avuto nessun dove! Per favore aiuto!

Ecco il mio webpack istituiti:

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

Grazie in anticipo!

+0

Cosa devi rimuovere per eliminare l'errore? Puoi impostare un esempio indipendente? –

+0

Devo sbarazzarmi del plugin di testo estratto. Ho provato diversi modi di modificare l'input, incluso un plugin per combinare i caricatori in quanto accetta solo una stringa – ggilberth

+0

Puoi provare a passare il secondo parametro di 'extract' solo come una stringa? –

risposta

0

Penso che devi cambiarlo in questo, il secondo parametro va come una stringa invece di matrice. Inoltre rimosso l'uso ripetuto del caricatore di stile.

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

Questa domanda continua a comparire quando ho provato a risolvere lo stesso errore per Webpack 2, SCSS, extracttextplugin, e reagire. Il seguente ha funzionato per me.

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

Spero che questo aiuti.

Problemi correlati