user2707674 user2707674 - 2 months ago 39
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/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.

Answer

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')
Comments