代码之家 › 专栏 › 技术社区 › Andy

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

angular5 less angular css javascript

Andy · 技术社区 · 7 年前

我有这个JS小提琴的CSS图表。如何将LESS添加到现有的Angular 5项目中,以便利用此图表,以及如何将本示例中的LESS文件的JavaScript和引用放置在我的Angular组件中的何处?JSFiddle包含在下面。

JavaScript:

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

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

3 回复 | 直到 7 年前

Blanc 7 年前

典型的角度组件有一个html、一个typescript和一个样式文件。后者通常是css:

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

你想告诉angular找一个。更少的文件,而不是。并在构建过程中编译它。为此:

编辑文件 .angular-cli.json 在您的项目中。设置属性 defaults.styleExt 到 "less" .
对于每个使用css且希望更改为更少的现有组件,请重命名样式文件,并确保typescript文件指向正确的样式表:
```
@Component({
  selector: 'app-my-comp',
  templateUrl: './my-comp.component.html',
  styleUrls:  ['./my-comp.component.less']
})
```

Mateus dos Santos 7 年前

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

Woot 7 年前

Andy,我之前的一句话是不正确的,角度支持许多css预处理器,包括更少的。现在我知道这是解决你问题的一个可能的方法。您可以生成如下所示的组件。

-电压表。组成部分输电系统

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

}

-电压表。组成部分less(只需将less代码粘贴到此文件中)

-电压表。组成部分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

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

再次为我今天早些时候的错误声明道歉,感谢seven Phase max指出我的错误。

编辑:对于现有项目,只需使用您正在使用的预处理器替换SCS即可。

Angular-cli from css to scss