在Angular2中包含Material Design Lite（MDL）

我正在嘗試將材質設計lite包含到我的Angular 2.0（final）項目（使用webpack）中。我使用這個設置：在Angular2中包含Material Design Lite（MDL）

我開始這個項目的關閉Angular Webpack Starter
進口的vendor.browser.ts
改名的src /應用程序/應用 '材料設計精簡版/ material.js'。 style.css的爲* SCSS
使用this guide處理SCSS文件
增加了幾個進口（變量，混入等，按本guide）到app.style.scss
添加以下內容webpack.common.js

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

在故宮出發，雖然，我得到一個錯誤，指出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）不工作，但我不知道如何解決。

來源

2016-09-30 user2707674

在我的項目中，我不得不使用這個路徑解析'path.resolve（__ dirname，'../ node_modules/normalize-scss/sass'）''可能是因爲我的gulp腳本（在你的情況下是webpack）在項目根目錄的子目錄中。 – TeoMatthew

工作得很好。太感謝了 – user2707674

由於TeoMatthew指出的，的WebPack配置文件是在項目根的子目錄，所以它需要使用「../」從的WebPack引用根，就像這樣：

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

來源

2016-09-30 16:58:29 user2707674

在Angular2中包含Material Design Lite（MDL）

回答

相關問題