css - Angular 5中单独模块的单独样式

Question

我的元素有两个主要部分。一个用于公共(public)网页，另一个用于管理控制面板。他们每个人的模板都有单独的 CSS 和 javascript 文件。

如果我在 index.html 中定义所有的 CSS 和 js 文件，所有文件都会在网页的第一次见面时加载，并且 CSS 类之间也可能会发生冲突。

我该如何处理这个问题？

应用程序组件:

<router-outlet></router-outlet>

app-routing.module:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { FirstComponent } from './first/first.component';


const appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  {
    path: 'controlpanel',
    loadChildren: 'app/control-panel/control-panel.module#ControlPanelModule'
  },
  {
    path: 'publicpanel',
    loadChildren: 'app/public-panel/public-panel.module#PublicPanelModule'
  }
];

每个模块都有它的子模块。我可以将它们的样式分开吗？

Answer 1

使用 sass 并为公共(public)和管理组件创建一个类标志 像这样

主题/_public.scss

.public{ 
  label { 
    color:red;
  }
}

主题/_admin.scss

.admin { 
  label {
    color:green;
  }
}

这在 main style.scc 中

@import "theme/_public.scss";
@import "theme/_admin.scss";

这对于应用程序性能来说要好得多你将拥有一个包含公共(public)页面和管理页面样式的样式文件

stackblitz example