在Angular2中包含Material Design Lite（MDL）

Question

我正在尝试将材料设计精简版包含在我的Angular 2.0（最终）项目中（使用webpack）。 我正在使用此设置：

• 我从Angular Webpack Starter开始了这个项目
• 在vendor.browser.ts中导入'material-design-lite / material.js'
• 将src / app / app.style.css重命名为* scss
• 使用本指南来处理scss文件
• 在app.style.scss中添加了几个导入（变量，mixins等，根据本指南 ）
• 将以下内容添加到webpack.common.js

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

在npm开始时，我收到一条错误消息，指出app.component.scss中的变量无法找到。 更具体地说，我收到以下错误消息：

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

看起来最后一步（包括webpack的路径）不起作用，但是我不知道如何解决这个问题。

Answer 1

正如TeoMatthew所指出的那样，webpack配置文件位于项目根目录的子目录中，因此需要使用“../”来引用webpack中的根目录，如下所示：

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