Angular2-mdl und webpack

Question

Ich habe zu den Schritten unter https://www.npmjs.com/package/angular2-mdl gefolgt und bekam Angular2-mdl funktioniert einwandfrei, aber jetzt bin ich an dem Punkt stecken, wo ich MDL scss-Dateien aufnehmen möchte.

Ich habe angle-cli-build.js nicht erweitert, und glaube nicht, dass ich tatsächlich muss. Also, wo soll ich die SASS-Compiler-Optionen einstellen, wenn ich nur das Webpack benutze?

Bisher habe ich versucht, dies zu ergänzen durch webpack Option:

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loader: 'awesome-typescript-loader', 
      exclude: [/\.(spec|e2e)\.ts$/] 
     },  
     { loader: 'raw', 
      test: /\.(css|html)$/ 
     }, 
     { 
      test: /\.scss$/, 
      loader: 'raw-loader!sass-loader', 
     },    
     { 
      test: /\.ts$/,     
      loader: 'ts', 
      exclude: /node_modules/ 
     } 
    ] 
}, 
sassLoader: { 
    includePaths: [ 
     path.resolve(__dirname, '/node_modules/angular2-mdl/src/scss-mdl') 
    ] 
}, 

Answer 1

gibt es zwei Möglichkeiten, um die CSS von Material Design lite enthalten:

• Sie die Pre erzeugte CSS verwenden können Dateien. Wählen Sie einfach die Themenfarben aus und fügen Sie den Link in Ihre HTML-Datei ein. Hier ist ein Tool, das Sie unterstützt: http://mseemann.io/angular2-mdl/theme

• Wenn Sie die volle Kontrolle über MDL haben möchten, können Sie die SCS-Dateien verwenden. Dazu müssen Sie das Projekt mit ng new projectname --style=sass (angle-cli@1.0.0-beta.16) generiert haben. In der generierten Datei können Sie die scss Quellen verwenden. Zum Beispiel:

  @import "~angular2-mdl/src/scss-mdl/color-definitions"; 
  
  $color-primary: $palette-blue-500; 
  $color-primary-dark: $palette-blue-700; 
  $color-accent: $palette-amber-A200; 
  $color-primary-contrast: $color-dark-contrast; 
  $color-accent-contrast: $color-dark-contrast; 
  
  @import "~angular2-mdl/src/scss-mdl/material-design-lite";