如何向现有的Angular 5项目中添加更少内容

Question

我有这个JS Fiddle用于CSS图表。 如何将LESS添加到现有的Angular 5项目中，以便可以利用此图表，以及如何将本示例中的JavaScript和对LESS文件的引用放在Angular组件中？ JSFiddle包含在下面。

JavaScript的：

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

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

Answer 1

典型的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'] }) 

Answer 2

我没有最好的解决方案，但是对我有用。 由于我没有节点服务器，所以我要做的是在项目中有dessss文件。 我在线编译它，它给了我CSS，然后再次将其放在项目中。 它仍然同时包含两个文件，但scss（在您的情况下较少）停留在那里，当我需要更多css时，我通常对其进行编码，但也总是添加scss。 所以我编译它再次覆盖了旧的CSS。 它不是很安全，但是当您无法添加新服务器来解决动态样式问题时，效果很好。 但是，如果您正在从事大型项目，则最好添加节点服务器或类似的方法，以减少安全的工作量。

Answer 3

Andy，我先前的陈述之一是错误的Angular支持许多CSS预处理器，包括更少的。 现在，我知道这是解决您的问题的一种可能的方法。 您可以生成如下所示的组件。

- 电压，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（只需将较少的代码粘贴到此文件中）

- 电压，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>

然后您可以使用

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

我使用Angular cli进行了这项工作，以生成为其分配较少预处理器的项目

ng new less-test --style=less

那将允许您使用jsfiddle示例中较少的代码。

对于今天早些时候的错误陈述，我们再次道歉，并感谢7个最大阶段指出了我的错误。

编辑：对于现有项目，请遵循本文，只需将scss替换为您使用的预处理器即可。

从CSS到CSS的Angular CLI