在没有CLI的情况下如何在Angular组件中减少使用 [英] How to use less in Angular component without CLI

问题描述

我有一个应用程序，在该应用程序中，我必须配置和减少用于动态主题实现的工作.问题是我们没有使用angular-cli，这里的配置有点怪异，所以我们手动启动了angular模块.

I've got an application where I have to configure and use less for dynamic theme implementation. The issue is we are not using angular-cli and configuration is bit weird here, so we are manually bootstrapping angular modules.

以下是应用程序的配置:

Following is the configuration of 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..

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;

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

and bootstrapping it through javascript like this: 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;

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

I want to use less variables and styles in my theme-preview component to change theme dynamically.

如何仅在主题组件中进行较少的配置.

How can I configure less in theme component only.

推荐答案

在您的 @Component 中，属性 styleUrl 具有所有需要一起编译的样式文件放入一个CSS文件中.但是，这是通过有角度的CLI完成的.

In your @Component, the property styleUrl has all the style files which need to be complied together into a single CSS file. This is however done by angular CLI.

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

If you intend to use CLI to generate CSS from less, go to the file called angular.json and change the value of schematics.@schematics/angular:component.style to 'less'.

但是，这可能对动态(运行时)主题没有帮助.对于动态主题，

This however, may not help you in dynamic (run-time) theming. For dynamic theming,

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

1. import all the less file using @import statement in any 1 main file
2. For serer side compilation, compile it using node.js server and less.js when CSS is requested. Therefore, less.js will be a production dependency in your node.js project.
3. For client side compilation, put the main less file created in step 1 into html's head section as below. <link href="main.less" rel="stylesheet" type="text/less"/> Next, import less.js into the main.ts of angular app or use script tag for less.js in the HTML body.

在 @Component 中，可以删除 styleUrls ，因为没有使用它.

In the @Component, styleUrls can be removed as there is no use of it.

此外，所有与组件相关的样式都需要包装在特定于该组件的1类中(包括HTML和更少的样式).这将确保您实现与角度CLI相同的行为.

Also, all the component related styles need to be wrapped in 1 class specific to the component(both HTML and less). This will ensure that you achieve the same behavior as that of angular CLI.

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

Hope this helps. Please comment for any more specific issue in this.

这篇关于在没有CLI的情况下如何在Angular组件中减少使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！