Как использовать меньше в угловой компонент без CLI - PullRequest
Новая
       24

Как использовать меньше в угловой компонент без CLI

2 голосов
/ 12 октября 2019

У меня есть приложение, в котором я должен настроить и использовать меньше для реализации динамической темы. Проблема в том, что мы не используем angular-cli, а настройка здесь немного странная, поэтому мы вручную загружаем угловые модули.

Ниже приведена конфигурация приложения:

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

компонент 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

-variable.less: содержит меньше переменных 

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

Я хочу использовать меньше переменных и стилей в моем компоненте предварительного просмотра темы для динамического изменения темы.

Как настроитьменьше только в компоненте темы.

1 Ответ

2 голосов
/ 25 октября 2019

В вашем @Component свойство styleUrl содержит все файлы стилей, которые необходимо объединить в один файл CSS. Однако это делается угловым CLI.

Если вы собираетесь использовать CLI для генерации CSS из less, перейдите в файл с именем angular.json и измените значение schematics.@schematics/angular:component.style на 'less'.

Это, однако, может не помочь вам в динамическом (во время выполнения) тематике. Для динамического создания тем

  1. импортируйте все файлы меньше, используя оператор @import в любом главном файле
  2. Для компиляции на стороне сервера, скомпилируйте его, используя node.js server и less.js, когдаCSS запрашивается. Поэтому less.js будет производственной зависимостью в вашем проекте node.js.
  3. Для компиляции на стороне клиента поместите основной файл less, созданный на шаге 1, в раздел заголовка html, как показано ниже. <link href="main.less" rel="stylesheet" type="text/less"/> Затем импортируйте less.js в main.ts угловое приложение или используйте тег script для less.js в теле HTML.

В @Component можно удалить styleUrls, так как его не использовать.

Кроме того, все стили, связанные с компонентами, должны быть обернуты в 1 класск компоненту (как HTML, так и менее). Это обеспечит то же поведение, что и у угловых CLI.

Надеюсь, это поможет. Пожалуйста, прокомментируйте для более конкретной проблемы в этом.

...