user2707674 user2707674 - 1 year ago 173
Sass (Sass) Question

Including Material Design Lite (MDL) in Angular2

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/ to *scss

  • used this guide to handle scss files

  • added several imports (variables, mixins etc, as per this guide) to

  • added the following to webpack.common.js

sassLoader = {
includePaths: [

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/
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\ (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.

Answer Source

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')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download