Rohe CSS nicht geladen in meinem Bundle.js Angular 2 App

Question

Ich habe gesucht, um eine Lösung für mein Problem zu finden, konnte aber nicht finden, warum meine CSS nicht geladen wird. Ich habe eine einfache Angluar 2 App, die HTML und CSS in den Komponenten erfordert. Das Webpack führt die Bündelung durch und erstellt die Bundle.js der HTML- und JS-Dateien. Es lädt jedoch nicht die CSS-Dateien im Bundle. Statt meiner eigentlichen CSS sagt:

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}"/***/ } 

hier die CSS Teile meiner webpack.config Datei verwandt Ich verwende:

{ 
       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'] 
    } 

und in meiner Komponente i bin einfach erfordert die HTML und CSS-Dateien.

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

Der Text in dem bundle.js setzen ist wie der Lader konnte die CSS-Dateien nicht finden, aber sie sind in dem gleichen relativen Pfad wie meine HTML-Dateien, die geladen werden.

Weiß jemand, was könnte das Problem sein?

Schätzen Sie jeden Vorschlag, ich bin bei Verlust durch Ausprobieren verschiedener Dinge.

Answer 1

Also habe ich ein Problem gefunden, das mein Problem gelöst hat, zumindest eines von ihnen. Ich brauchte die CSS unter meinem serverd Ordner ausschließen wie:

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

Also diese Weise diejenigen CSS wird nicht von Styler und Lader abgeholt werden, weil ich denke, eckig eine Liste von Text als CSS benötigt. Das hat also mein Problem gelöst.

Aber ich habe immer noch ein Problem, dass ich einen Hack dafür habe, aber ich mag es nicht. Bevor ich meine App für die Verwendung von webpack als Bundler änderte, verwendete ich npm und system.js (wie auf der Website angular.io dokumentiert). Also hatte ich eine globale CSS in meinem Index.html, die das gesamte Styling meiner App tat. Aber nach dem Wechsel zu Webpack konnte offensichtlich nicht mehr wie bisher auf den globalen Stil in index.html verwiesen werden. Um die globale Formatierung über alle meine Anwendungen zu erhalten, habe ich den ViewEncapsulation-Modus auf None (encapsulation: ViewEncapsulation.None) geändert. Das funktioniert, aber ich mag es nicht, es scheint nicht richtig, und ich fürchte, auf der Straße beißen mich.

Weiß jemand, wie man meinen globalen css für alle app benötigt? Ich habe einen Weg gefunden, funktioniert aber aus irgendeinem Grund nicht. Ich habe versucht, ExtractTextPlugin, war aber nicht in der Lage, es zu arbeiten.

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

und zu meinem Plugin hinzugefügt:

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

Irgendwelche Ideen, was mache ich falsch?

Dank