Как настроить порядок импорта файлов.css в Angular 5

Мое текущее приложение (созданное с помощью 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 во время выполнения?

Ответ 1

Вам нужно изменить на,

"styles": [
    "styles.css" 
],

Затем свяжите все CSS файлы в styles.css. Включите все файлы в верхней части файла styles.css.

@import url('~bootstrap/dist/css/bootstrap.min.css');
@import url('deeppurple-amber.css');
@import url('[email protected]/material/prebuilt-themes/deeppurple-amber.css');
@import url('another_css_file_from_angular_material.css');
@import url('app.component.css'); 
@import url('current-vehicle.component.css');

Я надеюсь, что это сработает.

Ответ 2

Импортированный CSS будет следовать обычным правилам "порядка импорта", поэтому импортированные позже стили переопределят более ранние.

Итак, первое, что нужно сделать, это убедиться, что ваш last.css является последним импортом в index.html

Однако, компоненты с styleUrls используют инкапсуляцию css. Это означает, что каждый компонент будет генерировать уникальные имена классов и конкретные правила CSS, которые являются более конкретными, то есть: p {color: red} в таблице стилей компонента будет переназначаться, например, p[_ngcontent-c1] {color: red}. Это означает, что если вы укажете p {color: blue} в своем last.css он будет менее конкретным, чем компонентный, и не будет применяться.

Самый простой способ гарантировать, что ваши окончательные правила "выигрывают", - это установить на них !important - то есть p {color: red !important} - однако это работает только в том случае, если вы также не используете !important в компоненте css тоже!

Кроме того, вы можете установить encapsulation в None чтобы отключить инкапсуляцию и просто иметь глобальные стили:

import { ViewEncapsulation } from '@angular/core';

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

Однако это необходимо сделать для каждого компонента и подвержено риску столкновения других правил стиля, поэтому с этим подходом следует проявлять осторожность.

Ответ 3

По сути, порядок импорта CSS работает в следующем файле из Angular.

Файл angular-cli.json имеет следующий angular-cli.json.

styles: [style.css ,import 2,...]

Базовый порядок файла CSS указан в файле angular-cli.json.

Если вы проверите файл angular-cli.json, будет иметь style.css по умолчанию настроенный в массиве styles.

импортированные файлы внутри .css будут упорядочены в обычном порядке.

CSS, который вы написали на уровне компонента, будет загружен вместе с компонентом при выполнении.

Надеюсь, это поможет вам.