Angular Material 组件样式不起作用

Question

我已将 Angular Material 安装到我的一个 Angular 应用程序中，尽管我已在 angular.json 文件中添加了样式链接，但组件的样式不起作用。这是 angular.json 文件的 styles 数组的样子：

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],

我尝试上下切换样式文件路径，如下所示。

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],

当我将 Bootstrap 路径移动到数组末尾时，Material 样式可以工作，但 Bootstrap 停止工作。

我的 CLI 和应用程序信息如下：

Angular CLI: 11.0.0-rc.0
Node: 12.16.3
OS: darwin x64

Angular: 11.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0-rc.0
@angular-devkit/build-angular   0.1100.0-rc.0
@angular-devkit/core            11.0.0-rc.0
@angular-devkit/schematics      11.0.0-rc.0
@angular/cdk                    10.2.5
@angular/material               10.2.5
@schematics/angular             11.0.0-rc.0
@schematics/update              0.1100.0-rc.0
rxjs                            6.6.3
typescript                      4.0.3

请帮我解决这个问题。

Answer 1

在 styles.ccs 文件中添加以下两行：

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

是的，您可以同时使用角度材料和引导程序。:)