Angular 12 不同模块组件CSS样式冲突如何解决

问题原因 #

当前配置将前台专属样式base.css、后台专属样式dashboard.css同时做了全局引入：angular.json的styles数组、全局样式文件styles.css中的引入，都会把两份样式打包进全局样式包，应用启动时两个样式文件会同时生效，同名选择器互相覆盖，直接导致布局错乱。

解决步骤 #

1. 清除全局重复的业务样式引入 #

首先移除所有全局位置对两个模块专属样式的引用：

• 修改angular.json，删除styles数组中./src/assets/css/base.css、./src/assets/css/dashboard.css两个配置项，仅保留全局通用样式入口，修改后配置如下：

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

• 编辑src/styles.css，删除文件内对base.css、dashboard.css的@import语句，该文件仅存放全站通用的公共样式，例如基础重置样式、通用组件样式等两个模块共用的规则。

2. 基于路由懒加载按模块加载对应样式（推荐方案） #

将前台、后台拆分为独立的路由特性模块，通过路由懒加载机制实现“访问对应模块时才加载对应样式”，从根源避免全局样式污染。

模块拆分

• 新建FrontModule前台特性模块及配套路由文件，收拢所有front目录下的业务组件
• 新建AdminModule后台特性模块及配套路由文件，收拢所有admin目录下的业务组件

模块级引入专属样式

在各模块的根布局组件中，通过styleUrls引入模块专属样式，样式作用域仅覆盖当前模块：
前台根布局组件配置示例：

@Component({
  selector: 'app-front-layout',
  templateUrl: './front-layout.component.html',
  styleUrls: [
    '../../assets/css/base.css',
    './front-layout.component.css'
  ]
})

后台根布局组件配置示例：

@Component({
  selector: 'app-admin-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: [
    '../../assets/css/dashboard.css',
    './admin-layout.component.css'
  ]
})

调整根路由配置

修改app-routing.module.ts，改为懒加载两个特性模块的配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PagenotfoundComponent } from './component/front/pagenotfound/pagenotfound.component';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./component/front/front.module').then(m => m.FrontModule)
  },
  {
    path: 'admin',
    loadChildren: () => import('./component/admin/admin.module').then(m => m.AdminModule)
  },
  { path:'**', component:PagenotfoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

完成后在两个特性模块各自的路由配置文件中，定义模块内部子路由即可：前台模块路由中空路径映射HomeComponent，后台模块路由中dashboard路径映射DashboardComponent、profile路径映射ProfileComponent。

3. 临时兼容方案（不推荐长期使用） #

如果暂时没有时间做模块重构，可以通过样式命名空间隔离：

• 给所有前台页面的最外层DOM添加统一类名front-container，将base.css内所有选择器都嵌套在.front-container命名空间下
• 给所有后台页面的最外层DOM添加统一类名admin-container，将dashboard.css内所有选择器都嵌套在.admin-container命名空间下
  该方案需要手动修改原有样式文件，后期维护成本较高，仅适合临时修复场景。

验证方法 #

配置修改完成后重新执行ng serve启动项目，打开浏览器开发者工具观察样式加载逻辑：访问前台路由时仅加载前台相关样式，进入后台路由时才加载后台专属样式，两份样式不会在同一页面同时生效，冲突问题即可解决。

内容的提问来源于stack exchange，提问作者arsha