Css 如何在没有CLI的情况下使用较少的角度组件

我有一个应用程序，我必须配置和使用较少的动态主题实现。问题是我们没有使用angular cli，这里的配置有点奇怪，所以我们手动引导angular模块

以下是应用程序的配置：

package.json

      "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "@angular/upgrade": "^4.0.0",
        "@angular/animations": "^4.0.1",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "^5.0.1",
        "systemjs": "0.19.39",
        "zone.js": "^0.8.4"
      },
and so on..

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ThemeModule } from "./theme.module";

window.appnamespace.platform = platformBrowserDynamic();
window.appnamespace.AppModule = AppModule
window.appnamespace.ThemeModule = ThemeModule;

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { ThemeComponent } from "./theme.component";
import { ThemeToolbar } from "./Themes/theme-toolbar/theme-toolbar.component";
import { ThemePreview } from "./Themes/theme-preview/theme-preview.component";
import { ThemeService } from "./services/themeManagement.service";

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    ThemeComponent,
    ThemeToolbar,
    ThemePreview,
    SetFocusDirective
  ],
  providers: [ThemeService, LocalizeThemeService, CommonService],
  bootstrap: [ThemeComponent]
})

export class ThemeModule { }

主题.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ThemeModule } from "./theme.module";

window.appnamespace.platform = platformBrowserDynamic();
window.appnamespace.AppModule = AppModule
window.appnamespace.ThemeModule = ThemeModule;

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { ThemeComponent } from "./theme.component";
import { ThemeToolbar } from "./Themes/theme-toolbar/theme-toolbar.component";
import { ThemePreview } from "./Themes/theme-preview/theme-preview.component";
import { ThemeService } from "./services/themeManagement.service";

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    ThemeComponent,
    ThemeToolbar,
    ThemePreview,
    SetFocusDirective
  ],
  providers: [ThemeService, LocalizeThemeService, CommonService],
  bootstrap: [ThemeComponent]
})

export class ThemeModule { }

其组成部分：

@Component({
  selector: "my-theme",
  templateUrl: "../js/divdrawer/Themes/theme.template.html"
})
export class ThemeComponent implements OnInit {
  //
}

并且像这样通过javascript引导它： window.appnamespace.platform.bootstrapModule（window.appnamespace.ThemeModule）

主题预览组件

@Component({
  selector: "theme-preview",
  templateUrl: "../theme-preview/theme-preview.component.template.html",
  styleUrls: ['../theme-preview/theme-style.less']
})

export class ThemePreview implements OnInit {
  // some code
}

主题样式。较少：包含css

@import "./theme-variable.less";

// some css

主题变量。less:包含较少的变量

@header-bg        :red;
@badge-title-bg   : #ddd;

我希望在主题预览组件中使用较少的变量和样式来动态更改主题

---

如何仅在主题组件中配置较少的内容。

在您的

@组件中，属性
styleUrl
包含所有需要合并到单个CSS文件中的样式文件。但是，这是由angular CLI完成的

如果要使用CLI从
less
生成CSS，请转到名为
angular.json
的文件，并将
schematics.@schematics/angular:component.style
的值更改为
'less'

但是，这可能对动态（运行时）主题化没有帮助。对于动态主题化

在任何一个主文件中使用
@import
语句导入所有较少的文件
对于serer端编译，当请求CSS时，使用
node.js server
和
less.js
编译它。因此，
less.js
将是node.js项目中的生产依赖项
对于客户端编译，将在步骤1中创建的主less文件放入html的head部分，如下所示。

接下来，将
less.js
导入angular app的
main.ts
，或者在HTML正文中使用
less.js
的脚本标记
在
@组件
中，可以删除
样式URL
，因为它没有任何用处

此外，所有与组件相关的样式都需要封装在一个特定于组件的类中（HTML和更少）。这将确保实现与angular CLI相同的行为

希望这有帮助。请对此中任何更具体的问题发表意见。
如果您不使用cli，您使用什么来传输、构建等？System.js？Webpack？好的，我在你的package.json中看到了system.js。为了加载更少的文件，您需要使用插件写入系统。像这个：。这个软件包有很好的文档记录，我想你可以很容易地复制它们的示例。@Yvan:Systemjs和WebpackSo，你需要一个插件来减少加载，这个插件是Systemjs推荐的。