代码之家 › 专栏 › 技术社区 › Paco Zevallos

无法导入Angular 6项目中的第三方材料SASS/SCSS文件

angular6 material-design angular

0

Paco Zevallos · 技术社区 · 6 年前

我能用角度的材料组件吗?如果是,正确的方法是什么?

我在用这个指南 link

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

然后以我的样式导入.scss: @import "@material/image-list/mdc-image-list";

编译时会出现以下错误:

/src/styles.scss中的错误 (./node_modules/raw loader!./node_modules/postss loader/lib??嵌入!./node_modules/sass loader/lib/loader.js??参考——14-3!/src/样式.scss) 模块生成失败:@import“@material/image list/mdc image list”;。^ 找不到或无法读取要导入的文件: @材料/图像列表/MDC图像列表。在里面 /用户/pacozevalos/cuscoavisos/avisos/src/styles.scss(第66行, 第1栏)

当我检查的时候 mdc-image-list.scss 我发现:

1 回复 | 直到 6 年前

1

3

Ritwick Dey 6 年前

必须配置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 还具有需要从中搜索的依赖项 节点模块 .

参考: Angular Wiki