在 Angular2 中包括 Material Design Lite (MDL)

Question

我正在尝试将 material design lite 包含到我的 Angular 2.0（最终）项目（使用 webpack）中。我正在使用此设置：

我开始这个项目 Angular Webpack Starter
在 vendor.browser.ts
已将 src/app/app.style.css 重命名为 *scss
使用this guide处理scss文件
向 app.style.scss

将以下内容添加到 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')

在 Angular2 中包括 Material Design Lite (MDL)

Including Material Design Lite (MDL) in Angular2

sass

webpack

material-design-lite

angular