2017-01-31 9 views
0

私はAngular2 Universalスタータを使用してプロジェクトをセットアップしています。私はセットアップにSCSSファイルをしようとしているが、抽出テキストプラグインを使用したとき、私は問題に実行しています:Angular2/Webpack 2/Sassセットアップ:TypeError:cssText.replaceは関数ではありません

package.json

"webpack": "2.2.1", 
"extract-text-webpack-plugin": "^2.0.0-rc.2" 

WebPACKのセットアップ:

.... 
module: { 
rules: [ 
    // TypeScript 
    { test: /\.ts$/, use: ['awesome-typescript-loader', 'angular2-template-loader'] }, 
    { test: /\.html$/, use: 'raw-loader' }, 
    { test: /\.css$/, use: 'raw-loader' }, 
    { test: /\.scss$/, use: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader:'raw-loader!sass-loader'})}, 
    { test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file?name=fonts/[name].[ext]"}, 
    { test: /\.json$/, use: 'json-loader' } 
], 
}, 

plugins: [ 
    //Use commonPlugins. 
    new ExtractTextPlugin({ 
    filename: '[name].css', 
    allChunks: true, 
    disable: false 
    }) 
].... 

を私が構築するときこのプロジェクトは、私はこのエラーを取得:私のアプリCompoNetをで

TypeError: cssText.replace is not a function 

を、私は「angular2テンプレート-LOAを使ってSCSSファイルを読み込みますDER」:私のdistフォルダで

... 
@Component({ 
    changeDetection: ChangeDetectionStrategy.Default, 
    encapsulation: ViewEncapsulation.Emulated, 
    selector: 'app', 
    styles: [require('../assets/styles/main.scss')], 

は、main.scssがあるmain.cssにコンパイルされています。誰もが正しい方向に私を指すことができる場合

/** 
* SCSS entry point 
* IMPORTANT: Do not add any styles here instead import your scss files 
*/ 
/*! 
* Bootstrap v3.3.7 (http://getbootstrap.com) 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT  (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*/ 
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 
html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; } 

body { 
    margin: 0; } 

article, 
aside ... 

、それをいただければ幸いです。ありがとうございました。

************ UPDATE *********************

は私が

require('../assets/styles/main.scss') 
ことが判明しました

は、Extract Text Pluginを使用して期待どおりに文字列を返しません。

require('../assets/styles/main.scss').toString() 

期待通りに動作しますが、私はヘッダーを検査したときに、私は見ている:

<link rel="stylesheet" href="/main.css"> ---> My generate scss file 
<style>[object Object]</style> ---> seems like this is coming from the app component styles property??? 

答えて

0

{ test: /.scss$/i, use: ['to-string-loader', ...extractCSS.extract({ loader: ['css-loader', 'sass-loader'] })] }

これは、コンポーネントからのすべてのCSSを抽出します私は、文字列に必要と出力をキャスト外部のCSSファイル。 角度がcssを修正できないので、これは角度表示のエンキャプチャレーションを中断します。 私はまだそれをencaptulationで動作させる方法を理解しようとしています。私は魔法使いの段階で角が属性を追加するCSSを変更するか分からない。また

の代わり: スタイル:[必要(」../資産/スタイル/ main.scss ')]あなたが言うことができ、 : styleUrls:[' ../assets/styles/main.scss' ]

関連する問題