Angular2-mdl and webpack

Question

Я выполнил шаги, указанные в https://www.npmjs.com/package/angular2-mdl, и получил работу Angular2-mdl безупречно, но теперь я застрял в точке, где хочу включить файлы scss из MDL.

Я не расширил angular-cli-build.js, и не думаю, что мне действительно нужно. Итак, где я устанавливаю параметры компилятора SASS, только при использовании webpack?

До сих пор я пытался добавить это опцией WebPack:

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

есть два способа включения в CSS от материала конструкции облегченного:

• вы можете использовать предварительно генерироваться CSS файлы. просто выберите цвета темы и включите ссылку в свой html-файл. вот инструмент, который вас поддерживает: http://mseemann.io/angular2-mdl/theme

• Если вы хотите иметь полный контроль над mdl, вы можете использовать файлы scss. Это требует, чтобы вы сгенерировали проект с ng new projectname --style=sass (angular-cli@1.0.0-beta.16). В сгенерированном файле styles.sass вы можете использовать источники scss. Например:

  @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";