8

Webpack kullanıyorum ve tepki-css-modülleri ve scss dosyaları ile tepki veriyorum. ben denemek ve SCSS dosyalarını alır her dosya üzerinde bana bir hata verir oluştururken -webpack, sass, tepki-css-modülleri - ReferenceError penceresi tanımlı değil

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

Ben sağlam bir buçuk gün boyunca googled var ve hiçbir yerde var! Lütfen yardım et!

İşte benim webpack kurulumu yapıldıktan:

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

peşin!

+0

Hatalardan kurtulmak için neyi kaldırmak zorundasınız? Bağımsız bir örnek kurabilir misin? –

+0

Ekstre metin eklentisinden kurtulmalıyım. Yükleyicileri yalnızca bir dize kabul ettiği için birleştiren bir eklenti de dahil olmak üzere girdiyi düzenlemenin birçok yolunu denedim. – ggilberth

+0

Bir dizgenin ikinci parametresini yalnızca bir dize olarak geçirmeyi deneyebilir misiniz? –

cevap

0

Sanırım bunu değiştirmelisiniz, ikinci parametre dizi yerine bir dize olarak gider. Ayrıca stil yükleyicinin tekrarlanan kullanımı kaldırıldı.

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

Bu soru ben WebPack 2, SCSS extracttextplugin için aynı hatayı gidermek çalıştığında kadar haşhaş ve tepki tutar. Aşağıdaki benim için çalıştı.

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

Bu yardımcı olur umarım.

İlgili konular