Я успешно добавил Bootstap в проект Angular и хотел сделать то же самое с MDBoostrap (я не знаю, будет ли Bootstrap по-прежнему полезен?)
Я выполнил официальную процедуру прямо здесь, используя установку 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"
],
и import
в моем style.scss
файле:
@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
репозиторий, которого на самом деле не существует, но я действительно не понимаю, почему.
ОБНОВЛЕНИЕ:
Я обнаружил, что 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:
На самом деле это работает!
@import....
в файле styles.scss
бесполезны.
Моя большая ошибка заключалась в том, что я пытался использовать компонент Mdb pro и тестировать на нем свою конфигурацию ... Мне очень жаль, ребята.
Спасибо за вашу помощь.