如何减少现有 Angular 5 个项目

How To Add Less To Existing Angular 5 Project

我有这个 JS Fiddle 用于 CSS 图表。我如何将 LESS 添加到现有的 Angular 5 项目中,以便我可以使用此图表,以及我在哪里放置 JavaScript 以及我的 Angular 中此示例中对 LESS 文件的引用零件? JSFiddle包含在下面。

JavaScript:

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();

http://jsfiddle.net/andydesrosiers/fwaLt99a/

我没有最好的解决方案,但它适合我。由于我没有节点服务器,我所做的是在项目中有 de scss 文件。我在线编译它,它给了我 css 我又把它放到了项目中。它仍然包含两个文件,但 scss(在您的情况下较少)保留在那里,当我需要更多 css 时,我会对其进行正常编码,但也总是添加 scss。所以我编译它并再次覆盖旧的css。它不是那么安全,但在您无法添加新服务器来解决动态样式问题时效果很好。但是如果你在一个大项目上,也许最好添加一个节点服务器或类似的东西来让你的 less 安全工作。

Andy,我之前的一个陈述是不正确的 Angular 支持许多 css 预处理器,包括 less。现在我知道这是解决您的问题的一种可能方法。您可以生成如下组件。

-电压-meter.component.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-voltage-meter',
  templateUrl: './voltage-meter.component.html',
  styleUrls: ['./voltage-meter.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class VoltageMeterComponent implements OnInit {
  @Input() voltage: number;
  constructor() { }

  ngOnInit() {
    console.log(this.voltage);
  }

}

-voltage-meter.component.less(只需将您的 less 代码粘贴到此文件中)

-电压-meter.component.html

<div class="radial-progress" attr.data-progress='{{voltage}}'>
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="voltage"><div class="voltage-in-use">Voltage in use</div></div>
    </div>
</div>

然后就可以使用组件using

<app-voltage-meter [voltage]='12'></app-voltage-meter>

我使用 Angular cli 来生成项目并为其分配较少的预处理器

ng new less-test --style=less

这将允许您在 jsfiddle 示例中使用更少的代码。

再次为我今天早些时候的错误陈述道歉,感谢seven-phases-max 指出我的错误。

编辑:对于现有项目,请按照本文进行操作,只需将 scss 替换为您正在使用的预处理器即可。

一个典型的 Angular 组件有一个 html、一个打字稿和一个样式文件。后者通常是 css:

my-comp.component.html
my-comp.component.ts
my-comp.component.less     <-- by default, is css

您想告诉 angular 查找 .less 文件而不是 .css 并在构建过程中编译它。为此:

  • 编辑项目中的文件 .angular-cli.json。将 属性 defaults.styleExt 设置为 "less".

  • 对于每个使用 css 且您想更改为更少的现有组件,重命名样式文件并确保打字稿文件指向正确的样式表:

    @Component({
      selector: 'app-my-comp',
      templateUrl: './my-comp.component.html',
      styleUrls:  ['./my-comp.component.less']
    })