2016-12-02 3 views
1

webpackの新機能で、Angular 2 Webアプリケーションをパッケージ化するために使用しています。タイトルごとに、SASSのコンパイルとExtractTextPluginに関連するJSのエラーに関する問題があります。ここでWebpack SASSビルドの問題、すべてがうまくコンパイルされた後、JSエラーが発生する

は私WebPACKの構成から関連の抜粋です:

module: { 
    rules: [{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract({ 
      fallbackLoader: ['style-loader'], 
      loader: [{ 
       loader: 'css-loader?sourceMap', 
       options: { 
        sourceMap: true 
       } 
      }, { 
       loader: 'sass-loader?sourceMap&output=compressed', 
       options: { 
        sourceMap: true 
       } 
      }] 
     }) 
    }] 

    new ExtractTextPlugin({ 
     filename: "style.css" 
    }), 
} 

ビルドが成功し、私のサーバーが起動します。しかし、私はブラウザでそれを実行したときに、私は次のようerorr受け取る:

Uncaught TypeError: cssText.replace is not a function 
    at extractStyleUrls (http://localhost:3000/vendor.bundle.js:32923:35) 
    at http://localhost:3000/vendor.bundle.js:19549:136 

は当初、私はsourcemapsが働いて取得しようとしている私の頭をたたきましたが、それは本当の痛みであることが証明されたが、私は、すべての最新のパッケージとそれを管理します上記の設定のバージョン。

/** 
* Rewrites stylesheets by resolving and removing the @import urls that 
* are either relative or don't have a `package:` scheme 
*/ 
:理由は、私は、スタックトレースに飛び込む..私はこれに関連している疑いがある相対ファイルのインポート、のために解決-URL-ローダーを使用することができることを、私は失敗している。この呼び出しの上に次のコメントを参照してくださいました誰もがこれらの問題が発生しました...何をするかのよう損失で現在

Module build failed: ReferenceError: document is not defined 

:私は今のurl-ローダーを追加する場合

、私はエラーの異なる種類を取得しますか?これ以上の情報をご希望の場合はお知らせください

答えて

3

私自身の質問に対する答えを発見しました。

私は、@Componentデコレータを使ってスタイルシートをインポートする新しい方法を使用していました。実際には、style_url_loader.jsという小さなスクリプトがありました。このスクリプトはエラー2のコア部分です。私は分かりませんなぜそのエラーが発生しましたが、私の意見では、あなたのCSSの範囲を適切に指定すれば、彼らのスタイルをする必要はなく、利点はありませんし、いくつかの欠点があります。

Ergo、私はうれしくそれを切り替え、必要な輸入を選択しました。 const style = require('./app.component.scss')、これはすぐに私の問題を解決しました。

これが誰かを助けることを願っています!

関連する問題