如何在没有 CLI 的情况下在 Angular 组件中使用 less

Question

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

下面是app的配置：

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..

ma​​in.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;

theme.module.ts

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);

theme.preview 组件

@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
}

theme-style.less: 包含 css

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

// some css

theme-variable.less：包含较少的变量

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

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

如何只在主题组件中配置less。

Answer 1

在您的@Component 中，styleUrl 属性包含所有需要编译成单个 CSS 文件的样式文件。然而，这是由 Angular CLI 完成的。

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

但是，这可能无法帮助您进行动态（运行时）主题化。对于动态主题，

1. 在任意 1 个主文件中使用 @import 语句导入所有 less 文件
2. 对于 serer 端编译，在请求 CSS 时使用node.js server 和less.js 进行编译。因此，less.js 将成为您的 node.js 项目中的生产依赖项。
3. 对于客户端编译，将步骤 1 中创建的 main less 文件放入 html 的 head 部分，如下所示。 <link href="main.less" rel="stylesheet" type="text/less"/> 接下来，将less.js 导入到Angular 应用程序的main.ts 中，或者在HTML 正文中为less.js 使用脚本标签。

在@Component中，styleUrls因为没有用可以去掉。

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

希望这会有所帮助。请对此中任何更具体的问题发表评论。