在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）

回答

相关问题