☰

extract-text-webpack-plugin React 使用時にウィンドウが定義されていないエラーが発生する 質問する

tag-icon • tag-icon reactjs webpack
extract-text-webpack-plugin React 使用時にウィンドウが定義されていないエラーが発生する 質問する

私は webpack を使用して React コンポーネントを構築しており、 を使用してextract-text-webpack-plugin生成された js ファイルから CSS を分離しようとしています。ただし、コンポーネントを構築しようとすると、次のエラーが発生しますModule build failed: ReferenceError: window is not defined。

私の webpack.config.js ファイルは次のようになります。

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    MainComponent: './src/main.js'
  },
  output: {
    libraryTarget: 'var',
    library: 'MainComponent',
    path: './build',
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
    }]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

ベストアンサー1

関数内の引数style-loaderとして使用したい場合があります。beforeextract

ネイティブ実装は次のとおりです。

    ExtractTextPlugin.extract = function(before, loader, options) {
        if(typeof loader === "string") {
            return [
                ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
                before,
                loader
            ].join("!");
        } else {
            options = loader;
            loader = before;
            return [
                ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
                loader
            ].join("!");
        }
    };

つまり、基本的に必要なことは次のとおりです。

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

たとえば を使用する場合sass。

おすすめ記事