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";

是的，您可以同时使用棱角材质和自举。：）

Answer 2

你好，@ Shafkhan最好不要混淆CSS框架。因为它们可能具有冲突的CSS。以我的拙见，您应该在Angular材质或Bootstrap中选择。

角材料组件样式不起作用

2 个答案: