angular-material2 - 在没有 JS 的情况下使用 Angular Material 2 CSS？

Question

我们在主项目中使用 Material 2 ( https://material.angular.io/ ) 的 Angular 风格，但希望创建一个单独的静态 (HTML/CSS) 原型工作区，该工作区只能访问 Material来自该主项目的 2 个 CSS 样式。这个想法是，这个单独的目录将从 Angular 项目中提取已编译的 CSS，但允许在不配置任何 JS 的情况下对 HTML/CSS 样式进行试验。

是否可以在不需要 AngularJS 的情况下从 Angular Material 2 项目编译完整的 CSS（组件、排版等）？似乎JS使用<style>标签插入了一些样式。

这是我尝试构建以加载 Material 样式的 SCSS 文件的基本演示：

@import "~@angular/material/theming";

@include mat-core(); 

这适用于添加诸如排版和类名之类的内容，但它不会为这些类添加所有可能的样式。例如，卡片组件只有非常基本的样式——它缺少其他样式，例如似乎通过 JS 注入的填充。

---

我还尝试了material-components-web项目，它在这里编译了 CSS 。它非常接近完成这项工作。但不幸的是，仅仅重命名.mdc-为.mat-是不够的。组件名称和用法并不完全相同。

例如，material-components-web 使用 BEM: mdc-card__actions。而 Angular 版本称它为.mat-card-actions.

标签： angular-material2