无法在Angular 6 Project中导入第三方材质sass / scss文件

Question

我可以在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。 SCSS）   模块构建失败：@import“@ material / image-list / mdc-image-list”; ^   要导入的文件未找到或不可读：   @材料/图像列表/ MDC-图像列表。在   /Users/pacozevallos/cuscoAvisos/avisos/src/styles.scss（第66行，   第1栏

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

Answer 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中选择此项。

E.g。 @import "~@material/image-list/mdc-image-list"

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

参考：Angular Wiki