Angular 6项目导入Material Sass/SCSS文件失败及组件使用咨询

没问题！Angular里当然可以用Material组件，不过你现在踩的坑是把原生Material Design Components (MDC)和Angular Material搞混啦——前者是通用的Web组件/样式库，后者是官方专门为Angular定制的Material组件库，适配性更强、用起来更省心。我先给你讲最推荐的Angular Material使用方法，再帮你解决当前用原生MDC遇到的导入错误~

一、优先推荐：使用Angular Material（适配Angular的官方方案） #

这是Angular项目里用Material组件的标准姿势，步骤超简单：

1. 一键安装并配置：
   在项目根目录执行命令：

   ng add @angular/material
   

   这个命令会自动帮你完成主题选择、动画配置、必要依赖安装，不用手动改一堆配置文件。
2. 导入需要的组件模块：
   打开你要使用Image List组件的Angular模块（比如app.module.ts），导入对应的模块：

   import { MatImageListModule } from '@angular/material/image-list';
   
   @NgModule({
     imports: [
       // ...其他你已经导入的模块（比如BrowserModule、CommonModule）
       MatImageListModule
     ]
   })
   export class AppModule { }
   

3. 在模板里直接使用：
   用Angular Material的专属组件语法写就好了，比如：

   <mat-image-list cols="3" rowHeight="1:1">
     <mat-image-list-item>
       <img matImageListSrc="your-image-path.jpg" alt="图片描述">
     </mat-image-list-item>
     <!-- 更多图片项 -->
   </mat-image-list>
   

   这样完全贴合Angular的开发模式，不会出现样式导入错误~

二、如果坚持用原生MDC（修正你当前的错误） #

你现在装的是原生MDC的@material/image-list，编译报错是因为SCSS文件的导入路径不对：

• 你之前写的@import "@material/image-list/mdc-image-list";少了.scss后缀，正确的导入路径应该是：

  @import "@material/image-list/mdc-image-list.scss";
  

  （看你截图里的文件也能看到，文件名是带.scss后缀的）

另外要注意，原生MDC是纯Web组件库，在Angular里用的话，除了样式，还需要手动初始化JS逻辑：
在你要使用的组件类里，导入MDC的ImageList并在视图初始化后初始化组件：

import { ImageList } from '@material/image-list';
import { AfterViewInit, Component } from '@angular/core';

@Component({
  // ...组件配置
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit() {
    const imageListElements = document.querySelectorAll('.mdc-image-list');
    imageListElements.forEach(el => new ImageList(el));
  }
}

不过这种方式需要自己处理DOM操作，不如Angular Material适配Angular的生命周期，所以还是更推荐前者哦~

内容的提问来源于stack exchange，提问作者Paco Zevallos