Angular2-mdl and webpack

Question

I have followed to steps provided at https://www.npmjs.com/package/angular2-mdl and got Angular2-mdl working flawlessly, but now I'm stuck at the point where I want to include MDL's scss files.

I have not extended angular-cli-build.js, and don't think I actually have to. So, where to I set the SASS compiler options, when using webpack only?

So far I have tried to add this to by 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

there are two ways to include the css from material design lite:

• you can use the pre generated css files. just select the theme colors and include the link in your html file. here is a tool that supports you: http://mseemann.io/angular2-mdl/theme

• if you want to have full control over mdl you can use the scss files. This requires that you have generated the project with ng new projectname --style=sass (angular-cli@1.0.0-beta.16). In the generated styles.sass file you can use the scss sources. For example:

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