Laden Sie einige CSS mit Style-Loader und CSS mit To-String-Loader in Webpack 2

Question

Ich arbeite an einer Angular 2 App und versuche derzeit, es mit Webpack 2 zu erstellen (das ist mein erster Ausflug in Webpack).

verstehe ich den Unterschied zwischen style-loader und to-string-loader, der ehemalige fügt CSS auf das DOM, erstellt das letztere ein String-Array für Angular 2 über die styles Eigenschaft zu konsumieren.

Meine Frage ist, kann ich beides haben? Oder anders ausgedrückt, wenn ich globale Styles in einer Datei habe site.css, was ist der richtige Weg, diese mit Webpack zu bündeln, ohne das Verhalten für Komponentenstile (to-string-loader, css-loader) zu ändern?

Wenn Sie sie nur in main.ts anfordern oder importieren, scheint dies nicht genug zu sein, damit Webpack herausfinden kann, was zu tun ist.

Answer 1

Lader can be overridden für bestimmte Modul Anfrage:

require("!!style!css!./global-styles/site.css"); 

oder verschiedene Lader can be defined for different conditions:

module: { 
    loaders: [ 
     { 
      test: /\.css$/, 
      include: [path.resolve(__dirname, "global-styles")], 
      loaders: ['style', 'css'] 
     }, 
     { 
      test: /\.css$/, 
      exclude: [path.resolve(__dirname, "global-styles")], 
      loaders: ['to-string', 'css'] 
     }, 
    ...