无法在 Angular 6 项目中导入第 3 方 material sass/scss 文件

Question

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

我正在使用这个link

的指南

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

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

编译时出现以下错误：

ERROR in ./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) Module build failed: @import "@material/image-list/mdc-image-list"; ^ File to import not found or unreadable: @material/image-list/mdc-image-list. in /Users/pacozevallos/cuscoAvisos/avisos/src/styles.scss (line 66, column 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 中选择它。

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

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

参考：Angular Wiki

无法在 Angular 6 项目中导入第 3 方 material sass/scss 文件

Failed to import 3rd party material sass/scss files in Angular 6 Project

material-design

angular

angular6