无法在 Angular 6 项目中导入 3rd 方材料 sass/scss 文件答案

【问题标题】：Failed to import 3rd party material sass/scss files in Angular 6 Project无法在 Angular 6 项目中导入 3rd 方材料 sass/scss 文件
【发布时间】：2018-05-30 17:47:09
【问题描述】：

我可以在 Angular 中使用 Material 组件吗？如果是这样，正确的做法是什么？

我正在使用这个link

的指南

我用过：npm install @ material/image-list

然后我在我的 style.scss 中导入：@import "@material/image-list/mdc-image-list";

编译时出现以下错误：

./src/styles.scss 中的错误 (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles. css) 模块构建失败：@import "@material/image-list/mdc-image-list"; ^ 找不到或无法读取要导入的文件： @material/image-list/mdc-image-list。在 /Users/pacozevallos/cuscoAvisos/avisos/src/styles.scss（第 66 行，第 1 列）

然后当我检查mdc-image-list.scss 时，我发现：

【问题讨论】：

我也在使用 Angular Material，但这不是我的问题，谢谢。
我的问题是您是否可以使用 Material Design 组件，如果可以？什么是正确的方法。如果您清楚地检查了特定链接，则它是 Material Design 而不是 Angular Material。顺便说一下，我已经安装了 Angular 材料。
如果我不清楚，我很抱歉。发生的情况是，Material Design 中有一些更完整的组件，例如，我尝试使用 Angular Material 的 Grid-list，但我想要一个砖石网格，并且我可以通过 Material Design（图像列表）获得。举个例子吧。
很公平。我会退出，因为我没有一个好的答案，但你应该把它放在你的问题中。

标签： angular material-design angular6

【解决方案1】：

您必须配置 Angular CLI 来解决此问题。

默认情况下，它会搜索./。

@import "@material/image-list/mdc-image-list" === 从./@material/image-list/mdc-image-list 导入

但这是存储在node_modules中的第三方模块。

打开angular.json 文件并更改stylePreprocessorOptions.includePaths 属性。

stylePreprocessorOptions": {
   "includePaths": [
       ".",
       "./node_modules" 
   ]
}

示例配置：

{
 // ...
 "styles": [ ],
  "stylePreprocessorOptions": {
     "includePaths": [
         ".",
         "./node_modules" 
      ]
   },
  "scripts": []
  // ...
}

有一个替代解决方案。您可以使用~ 符号告诉 Angular CLI 从node_module 中选择它。

例如@import "~@material/image-list/mdc-image-list"

但它不适用于此设置，因为此 scss 还具有需要从 node_module 搜索的依赖项。

参考：Angular Wiki

【讨论】：

这是我所需要的，效果很好。感谢您的更正和回复。