2

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')
    ]
},
curiosity
  • 388
  • 1
  • 13

1 Answers1

0

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";
    
michael
  • 16,221
  • 7
  • 55
  • 60
  • Thank you Michael. I wasn't using angular-cli, but I am now. I migrated my existing project and followed your advice. Everything is working flawlessly now. Thanks. – curiosity Oct 07 '16 at 13:03