在我的应用程序中遇到 Angular Material、SCSS 配置问题——答案

【问题标题】：Having trouble with Angular Material, SCSS configuration in my App --在我的应用程序中遇到 Angular Material、SCSS 配置问题——
【发布时间】：2019-11-11 12:45:40
【问题描述】：

嗯，

我在尝试启动我的 Angular 应用程序时遇到以下错误/警告。

    ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build- 
    angular/src/angular-cli-files/plugins/raw-css- 
    loader.js!./node_modules/postcss-loader/src?? 
    embedded!./node_modules/sass-loader/lib/loader.js??ref--13- 
    3!./src/styles/styles.scss) 
    Module build failed (from ./node_modules/sass-loader/lib/loader.js): 

    undefined 
    ^ 
    Undefined operation "rem(1.4) * 13". 
    ╷ 
    1788 │ $button-font-size-dense: $body-font-size-base * 13/14 !default; 
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^ 
    ╵ 
    node_modules\angular-material\angular-material.scss 1788:26 @import 
    src\styles\_material.scss 8:9 @import 
    stdin 1:9 root stylesheet 
    in
    E:\REPRIMX\SellcodesProj_MEAN\ProtikAPPX\BaseSideAPP\BaseSideAPP\node_modules\angular-material\angular-material.scss (line 1788, column 26)

现在，这是我的 _material.scss。

@font-face { 
font-family: 'Fontil Sans'; 
src: url('../assets/fonts/FontinSans/Fontin_Sans_R.otf') format('opentype'); 
} 

@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 
@import '~@angular/material/theming'; 


$custom-typography: mat-typography-config( 
$font-family: 'Fontil Sans, monospace', 
$headline: mat-typography-level(32px, 48px, 700), 
$body-1: mat-typography-level(16px, 24px, 500) 
); 
@include angular-material-typography($custom-typography);

我已经通过 npm 在我的项目中添加了 angular-material 和 angular/theme。所以呢？为什么会失败？我猜我可能需要用角度材料替换角度/材料？是这样还是有什么问题？

您需要查看我的 angular.json 以获得更多想法吗？如果是这样，请告诉我，我会分享。

请给我一些提示，卡住了！

【问题讨论】：

标签： angular typescript npm sass angular-material

【解决方案1】：

您似乎导入了错误的包，AngularJS 的 Angular Material。

node_modules\**angular-material**\angular-material.scss 1788:26 @import...

如果是这样，你只需要删除这个包。

添加然后添加@angular/material 和@angular/cdk

您可以在official docs of Angular Components（Angular Material 的新名称）中查看更多详细信息。

【讨论】：

你是对的。我删除了 angular-material 并安装了你指出的那两个。它有效。