Including Material Design Lite (MDL) in Angular2

Question

I'm trying to include material design lite to my Angular 2.0 (final) project (uses webpack). I'm using this setup:

I started the project off Angular Webpack Starter
imported 'material-design-lite/material.js' in vendor.browser.ts
renamed src/app/app.style.css to *scss
used this guide to handle scss files
added several imports (variables, mixins etc, as per this guide) to app.style.scss
added the following to webpack.common.js

sassLoader = {
  includePaths: [
    path.resolve(
      __dirname,
      "./node_modules/material-design-lite/src")
  ]
};

Upon npm starting though, I'm getting an error saying that variables within app.component.scss could not be found. More specifically, I'm getting the following error message:

ERROR in ./src/app/app.style.scss 
Module build failed: 
@import "variables"; 
^ 
   File to import not found or unreadable: variables 
Parent style sheet: stdin 
   in d:\Project Files\<full-path>\src\app\app.style.scss (line 4, column 1)
@ ./src/app/app.component.ts 25:21-48 
@ ./src/app/app.module.ts 
@ ./src/app/index.ts 
@ ./src/main.browser.ts 
@ multi main

It looks like the last step (include path to webpack) is not working, however I'm not sure how to fix that.

on my project i had to use this path resolution path.resolve(__dirname, '../node_modules/normalize-scss/sass') probably because my gulp script (in your case webpack) is on subdirectory of project root. — TeoMatthew

user2707674 user2707674 · Accepted Answer · 2016-09-30T16:58:29

As TeoMatthew pointed out, the webpack config file is in a sub-directory of the project root, so it's required to use '../' to reference the root from the webpack, like so:

path.resolve(__dirname, '../node_modules/normalize-scss/sass')

Including Material Design Lite (MDL) in Angular2

1 Answers