Question

我有一个CSS图表的JS小提琴。如何将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的现有组件，如果要更改为less，请重命名样式文件并确保typescript文件指向正确的样式表：
```
@Component({
  selector: 'app-my-comp',
  templateUrl: './my-comp.component.html',
  styleUrls:  ['./my-comp.component.less']
})
```

Answer 2

我没有最好的解决方案，但它对我有用。由于我没有节点服务器，我所做的是在项目中使用de scss文件。我在网上编译它，它给了我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示例中的代码较少。

再次为我今天早些时候的错误陈述道歉，并感谢七个阶段 - 最大指出我的错误。

编辑：对于现有项目，请按照本文将scss替换为您正在使用的预处理器。

Angular-cli from css to scss

如何向现有Angular 5项目添加更少

3 个答案: