Css 按需导入其他SCS作为angular中的主题

我正在为我的应用程序实现管理面板，并且该面板已经延迟加载，但是我想为管理面板分离SCS。说：

公共门户 ecom-blue.scss

管理面板： ecom-blue.scss ecom-admin.scss

到目前为止，我正在以如下方式导入theme.scs中的两个CSS：

@import '~@angular/material/theming';
@include mat-core();
@import "themes/ecom-blue";
@import 'themes/ecom-admin';
$background: map-get($ecom-theme, background);
$foreground: map-get($ecom-theme, foreground);

@import "scss/variables";
@import "scss/themes";
@import "scss/views";

通过以下方式在app.scss中进一步导入：

@import '~@angular/material/theming';
@include mat-core();
@import "themes/ecom-blue";
@import 'themes/ecom-admin';
$background: map-get($ecom-theme, background);
$foreground: map-get($ecom-theme, foreground);

@import "scss/variables";
@import "scss/themes";
@import "scss/views";

在angular.json中

"styles": ["src/assets/styles/app.scss",
"node_modules/font-awesome/css/font-awesome.css"]

这种方法的问题是style.css（编译文件）将同时包含这两个主题，而我只希望在根据延迟加载激活管理路由器布局的地方包含css的租金

我想知道实现这一点的最佳方法，以便style.css文件应按模块划分，并在需要时加载

编辑： 这就是我的路由器组件的外观：

@Component({
  selector: 'app-auth-layout',
  templateUrl: './auth-layout.component.html',
  styleUrls: ['./../admin-layout.scss'],
  // encapsulation: ViewEncapsulation.None
})

这就是它的惰性加载方式：

{
    path: '',
    component: AuthLayoutComponent,
    children: [
      {
        path: 'admin4556',
        loadChildren: () => import('./views/admin/admin.module').then(m => m.AdminModule),
        data: { title: 'Admin', breadcrumb: 'Admin'}
      }
    ]
  },

---

更新：如果您将使用

视图封装。无
，是的，这允许您为子组件应用基本样式，例如，如果您在父组件中为标签
设置样式，则子组件中将应用与
相同的样式。但这不是最佳做法。因此，如果您有时想更改孩子的样式，您需要添加
！重要信息
或向元素添加更多点以使其更具体。如果您将所有常用样式移到BaseTheme甚至styles.scs，并将一些特定样式保留在延迟加载的组件中，效果会更好<代码>''
如果您想按不同的样式区域分割管线，则会有所帮助。如果您只有一个区域基础样式，则只能使用styles.css

原件：
如果您想将一些常用样式（例如）应用于用户和管理组件，同时将一些样式专门加载到它们中的每一个，您可以使用
'
route来实现。这不是特定的路线，只是被跳过并进一步延伸到儿童，但这允许我们在它之前添加其他样式。看起来是这样的：

 {
   path: '',
   component: BaseTheme, //base style
   children: [
      { path: 'adminpanel', loadChildren: () => import('./adminpanel/adminpanel.module').then(m => m.AdminPanelModule) } //inside we add specific style
      { path: 'userpanel', loadChildren: () => import('./userpanel/userpanel.module').then(m => m.UserPanelModule) } //inside we add specific style
    ]
  }

如果我在CommonUserLayoutComponent加载上加载某些SCS，它将仅对该组件可用。类似样式URL:['./../admin layout.scss']。。。。你能给我举个例子吗？我该如何为路由器出口下的整套组件导入它component@Jay希望，我理解正确，看看我编辑过的答案。你的意思是说我在那里添加了额外的css组件，而不是组件：BaseTheme，//base style，那么我应该在哪里提到我的组件？现在我正在这样做：{path:''，component:AuthLayoutComponent，children:[{path:'admin4556'，loadChildren:（）=>import（'./views/admin/admin.module'）。然后（m=>m.AdminModule），数据：{title:'admin'，breadcrumb:'admin'}]}，我编辑了我的问题，希望你能理解我已经做了什么。