将 MDBootstrap 添加到 Angular 项目

Question

我成功地将 Bootstap 添加到 Angular 项目中，并希望对 MDBoostrap 做同样的事情（我不知道 Bootstrap 是否仍然有用？）

我按照官方程序just here使用npm安装。

但是当我尝试导入样式时出现以下错误

这是我的app.module.ts 文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
/*Ajout Test du dossier ngx bootstrap*/
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    /*Ajout*/
    MDBBootstrapModule.forRoot(),
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的angular-cli.json 文件：

"index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "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"
      ],

还有我的style.scss 文件中的import：

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; //OK
@import "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss"; //OK
@import "../node_modules/font-awesome/scss/font-awesome.scss"; // ERROR : ../fonts/fontawesome-webfont.eot
@import "../node_modules/angular-bootstrap-md/scss/mdb-free.scss"; // ERROR : ../font.roboto.Robto-Bold.eot

就像我评论过的前 2 个导入没问题，但其他 2 个会抛出错误。

查看错误我感觉系统正在查看一个确实不存在但我真的不明白为什么的myProject/font repesitory。

更新：

我发现roboto.scss 文件使用了相对 URL

@font-face {
font-family: "Roboto";
src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
    url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
    url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
    url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");

font-weight: 200;

}

$roboto-font-path = ../fonts/roboto/。这显然是个问题。

可以使用resolve-url-loader 解决，并将配置更改为

{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
}

但使用 angular-cli 不是我的情况。

更新 2：

事实上它有效！

styles.scss 文件中的@import.... 没用。

我犯的最大错误是尝试使用 Mdb pro 组件并在其上测试我的配置...对不起各位。

感谢您的帮助。

Answer 1

漩涡，

第一件事：您使用哪种操作系统？ Windows、Linux 还是 Mac？

第二件事：您是否使用--style=scss 参数创建了您的项目？

按照以下步骤使其正常工作：
ng new name --style=scss

然后安装包：

npm install angular-md-bootstrap --save

然后将导入添加到app.module.ts:

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

然后将样式和脚本位置添加到tsconfig.app.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"
],

然后使用以下方法安装其他库：

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

然后在根目录下的tsconfig.json文件中添加：

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

对于/src 目录中的tsconfig.app.json 文件，我添加了：

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

现在一切都应该正常了。

---

如果您尚未创建具有--style=scss 属性的项目，则必须执行以下操作：

ng set defaults.styleExt scss

并将每个扩展名从 .css 更改为 .scss。对于我的项目，我更改了文件：

src/styles.css -> src/styles.scss,

src/app/app.component.css -> src/app/app.component.scss

在src/app/app.components.ts

stylesUrls ['./app.component.css'] -> stylesUrls: ['./app.component.scss']

现在，即使您尚未使用 --styles=scss 创建项目，一切都应该可以正常工作。

对于您现有的 projectdDelete 从app.module.ts 这些行：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

最好的问候，
来自 MDBootstrap 的 Damian