8

Używam webpacka i reaguję na reagujące moduły css i pliki scss. Kiedy próbuję zbudować i to daje mi błąd na każdym pliku, który importuje pliki SCSS -webpack, sass, react-css-modules - okno ReferenceError nie jest zdefiniowane

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

Mam google solidnej półtora dnia i mam nie ma gdzie! Proszę pomóż!

Oto mój WebPack skonfigurować:

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

Dzięki z góry!

+0

Co musisz usunąć, aby pozbyć się błędu? Czy możesz ustawić samodzielny przykład? –

+0

Muszę się pozbyć wtyczki tekstu wyciągu. Próbowałem różnych sposobów edycji danych wejściowych do niego, w tym wtyczki do łączenia ładowarek, ponieważ akceptuje tylko ciąg – ggilberth

+0

Czy możesz spróbować przekazać drugi parametr 'extract' tylko jako ciąg? –

Odpowiedz

0

Myślę, że trzeba to zmienić, drugi parametr jest ciągiem zamiast tablicy. Usunięto również wielokrotne użycie programu ładującego styl.

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

To pytanie wciąż pojawiały się, kiedy starałem się rozwiązać ten sam błąd na Webpack 2 SCSS, extracttextplugin i reagują. Poniższe pracował dla mnie.

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

Mam nadzieję, że to pomoże.