Angular2-MDL и веб-пакет

Question

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

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

До сих пор я пытался добавить это в опцию 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 из Lite Design Material:

• Вы можете использовать предварительно созданные 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";