未処理のCSSがバンドルにロードされていません.js角度2のアプリケーション

Question

私の問題の解決方法を探していますが、なぜ私のCSSがロードされていないのかわかりません。 コンポーネントにhtmlとcssが必要な単純なAngluar 2アプリがあります。 webpackはバンドルを行い、htmlファイルとjsファイルのbundle.jsを作成します。ただし、バンドル内のcssファイルはロードされません。代わりに、私の実際のCSSのそれは置く：ここ

function(module, exports) { 
    module.exports = "// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!./../../node_modules/css-loader/index.js!./print.css\");\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = require(\"!./../../node_modules/style-loader/addStyles.js\")(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(module.hot) {\n\t// When the styles change, update the <style> tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(\"!!./../../node_modules/css-loader/index.js!./print.css\", function() {\n\t\t\tvar newContent = require(\"!!./../../node_modules/css-loader/index.js!./print.css\");\n\t\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove the <style> tags\n\tmodule.hot.dispose(function() { update(); });\n}"/***/ } 

は、私が使用しています私のwebpack.configファイルのCSSの部分に関連している：

{ 
       test: /\.css$/, 
       loader: 'raw' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style!css' 
      }, 
      { 
       test:/\.gif|png/, loader: "file-loader"  
      }, 
      { 
       test: /\.html$/, 
       loader: 'raw' 
      } 
    resolve: { 
     extensions: ['', '.ts', '.js', '.json','.css', '.html'] 
    } 

、私のコンポーネントで、私は単純にHTMLを必要としていますし、 CSSファイル。

@Component({ 
    selector: 'my-app', 
    styles: [require('./my.css')], 
    template: require('./my.html') 
}) 

bundle.jsに入れたテキストは、CSSファイルを見つけることができなかったローダーのようなものですが、彼らはロードされている私のhtmlファイルと同じ相対パスです。

問題が発生する可能性があることは誰か知りませんか？

私は何かアドバイスをいただければ幸いです。

Answer 1

私は少なくとも私の問題を解決した問題を発見しました。 私は次のように私のServerDにフォルダの下のcssを除外するために必要な：

{ 
    test: /\.css$/, 
    loader: 'style!css, 
    exclude: /app/ 
} 

角度がCSSなどのテキストのリストを必要とする、私が思うに、ので、それらのCSSが文句を言わないスタイラーとローダーによってピックアップされるので、この方法を。 これは私の問題を解決しました。

しかし、私はまだそれにハックを持っているが、私はそれが好きではないという問題があります。 webpackをbundlerとして使用するようにアプリケーションを変更する前に、npmとsystem.jsを使用していました（angular.ioサイトに記載されています）。だから、index.htmlには私のアプリの全体的なスタイリングをしたグローバルなCSSがありました。しかし、webpackに変更した後は、明らかに以前のようにindex.htmlのグローバルスタイルを参照できませんでした。私のアプリケーションのすべてでグローバルなスタイリング作業を行うために、私はViewEncapsulationモードをNone（カプセル化：ViewEncapsulation.None）に変更しました。これは動作しますが、私はそれが気に入らない、それは正しいように見えない、と私は道を恐れている私をかむ。

誰も私のグローバルなCSSをすべてのアプリケーションに必要とする方法を知っていますか？ 私は方法を見つけましたが、何らかの理由でうまくいかない場合があります。 ExtractTextPluginを試しましたが、それを動作させることができませんでした。

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), 
    exclude: /app/ 
} 

と私のプラグインに追加：

plugins: [ 
new ExtractTextPlugin("./glob.css") 
] 

任意のアイデア私が間違って何をやっていますか？

ありがとうございました