angular - 如何在基于 Sass 的 Angular4 应用程序中集成 Bootstrap 材料设计

Question

我正在尝试将 bootstrap-material-design 集成到基于 sass 的 angular4 应用程序中。

它与预编译的 css 完美配合。但我想使用 bootstrap-material-design 的 sass 版本。

请帮我。

Answer 1

这是使用 Sass 将 Material Design 与 Bootstrap 4 结合使用的分步方法

请按照以下给定步骤进行配置或 https://mdbootstrap.com/angular/5min-quickstart/

第 1 步：使用 Angular CLI 命令创建新的 Angular 项目：

ng new your-angular-project --style=scss

第 2 步：

cd your-angular-project

第 3 步：GitHub npm 安装

npm i angular-bootstrap-md --save 

第 4 步：向 app.module.ts 添加

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
});

第 5 步：确保 styleExt 在 angular-cli.json 文件中设置为“scss”，如果没有更改：

"styleExt": "css" to "styleExt": "scss"

第 6 步：

确保你有 . 如果您有 src/styles.css，请将其重命名为 .scss。

如果要更改现有项目中的样式，可以使用 ng set defaults.styleExt scss

第 7 步：在 angular-cli.json 中添加以下行：

"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "./styles.scss"
],
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  "../node_modules/hammerjs/hammer.min.js"
],

第 8 步：更新 ts.config.json 文件，将以下内容添加到位于根文件夹的 tsconfig.json 文件中

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 

第 9 步：安装外部库

npm install -–save chart.js@2.5.0 font-awesome hammerjs

第 10 步：运行服务器

ng serve --open

对于文档，https://mdbootstrap.com/，打开这个页面后，往下走你会发现这样，然后点击查看文档