Мое текущее приложение (созданное с помощью Angular CLI) выглядит следующим образом:
angular.cli.json (в корневой папке):
....
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"styles.css"
],
SRC/приложение /app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
//angular material
import {MatTabsModule} from "@angular/material";
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatListModule} from '@angular/material/list';
//angular components
import {AppComponent} from './app.component';
import { CurrentVehicleComponent } from './current-vehicle/current-vehicle.component';
import { BackendCommunicationService } from './backend-communication.service';
import { SharedDataService } from './shared-data.service';
@NgModule({
declarations: [
AppComponent,
CurrentVehicleComponent
],
imports: [
BrowserModule,
//angular material
MatButtonModule,
MatCheckboxModule,
MatSlideToggleModule,
MatTabsModule,
MatToolbarModule,
MatCardModule,
MatListModule,
],
providers: [BackendCommunicationService, SharedDataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
Если я сейчас ng serve --open
приложение (ng serve --open
), Angular CLI будет включать файлы .css в следующем порядке:
- Bootstrap CSS
- DeepPurple-amber.css
- SRC/style.css
- SRC/app.component.css
- SRC/приложение/ток-vehicle.component.css
- Файл .css из углового материала
- другой файл .css из анулярного материала
Я ищу способ, которым angular добавит мои "рукописные" файлы .css (файлы 4., 5. и .css из еще не реализованных компонентов) в конце (то есть после 6. и 7.).
В деталях:
- Bootstrap CSS
- DeepPurple-amber.css
- SRC/style.css
- Файл .css из углового материала
- другой файл .css из анулярного материала
- SRC/app.component.css
- SRC/приложение/ток-vehicle.component.css
Как это возможно?
Обновление для Баунти
Чтобы уточнить вопрос здесь. Компоненты AngularMaterial внедряют свои собственные теги <style></style>
с необходимым css для компонента, на который вы ссылаетесь. Это всегда добавляется после вставленных тегов <style></style>
component.css
как показано в первом списке порядка стилей.
Это проблема из-за следующего сценария:
<a class="my-custom-btn mat-raised-button">Button</a>
.my-custom-btn{margin: 10px;}
.mat-raised-button{margin: 0px;} /* Value From angular material */
Это затем вводится в следующем порядке во время выполнения:
<style>.my-custom-btn{margin: 10px;}</style>
<style>.mat-raised-button{margin: 0px;}</style>
Это означает, что единственным обходным .my-custom-btn{margin: 10px !important}
может быть .my-custom-btn{margin: 10px !important}
который крайне неуправляем, если вы пытаетесь переопределить некоторые свойства CSS в одном компоненте, а затем другой набор свойств в другом.
Так есть ли способ изменить порядок, в котором эти теги <style></style>
вводятся angular во время выполнения?