Question

我当前的应用程序（通过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），Angular CLI将按以下顺序包含.css文件：

Bootstrap CSS
deeppurple-amber.css
的src / style.css中
的的src / app.component.css
的的src /应用/电流vehicle.component.css
.css文件
来自anular资料的另一个.css文件

我正在寻找一种方法，即angular将在末尾添加我的“手写”.css文件（4.，5.和.css文件来自尚未实现的组件）（即在6.和7.之后）

详细说明：

Bootstrap CSS
deeppurple-amber.css
的src / style.css中
.css文件
来自anular资料的另一个.css文件
的的src / app.component.css
的的src /应用/电流vehicle.component.css

这怎么可能？

Bounty的更新

在此澄清问题。 AngularMaterial组件为您引用的组件注入自己的<style></style>标记以及所需的css。这总是在component.css注入<style></style>标记之后添加，如第一个样式订单列表中所示。

由于以下情况，这是一个问题：

<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}，如果您尝试覆盖一个组件中的某些css属性，然后在另一个组件中覆盖另一组属性，那么这是非常难以管理的。

那么有没有办法在运行时重新排列这些<style></style>标记按角度注入的顺序？

Answer 1

您需要更改为

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

然后，在styles.css中链接所有CSS文件。将所有文件都包含在styles.css文件的顶部。

@import url('~bootstrap/dist/css/bootstrap.min.css');
@import url('deeppurple-amber.css');
@import url('~@angular/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');

我希望这会起作用。

Answer 2

导入的CSS将遵循通常的导入顺序＆＃39;规则，因此稍后导入的样式表将覆盖之前的样式。

首先要做的是确保您的last.css是index.html中的最后一个导入

但是，styleUrls的组件使用css封装。这意味着每个组件将生成唯一的类名称和特定的css规则，这些规则更具体，即：组件样式表中的p {color: red}将重新映射到例如p[_ngcontent-c1] {color: red}。这意味着，如果您在p {color: blue}中指定last.css，则其特定性将低于组件1，并且不会被应用。

确保您的最终规则获胜的最简单方法＆＃39;是设置!important - 即p {color: red !important} - 但这仅适用于您在组件css中也不使用!important的情况！

或者，您可以将encapsulation设置为None以禁用封装，并且只具有全局样式：

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

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

然而，必须对每个组件进行此操作，并且存在其他样式规则冲突的风险，因此必须谨慎使用此方法。

Answer 3

基本上，CSS的导入顺序在Angular的以下文件中起作用。

angular-cli.json文件具有以下配置。

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

angular-cli.json文件中提到了CSS文件的基本顺序。

如果您检查angular-cli.json文件，则会在style.css数组中将styles作为默认配置。

在.css内

导入的文件将有规律地排序。

您在组件级别编写的CSS将在执行时随组件一起加载。

希望这对您有所帮助。

如何在Angular 5中调整.css文件的导入顺序

Bounty的更新

3 个答案: