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