如何减少现有 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();
我没有最好的解决方案,但它适合我。由于我没有节点服务器,我所做的是在项目中有 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']
})
我有这个 JS Fiddle 用于 CSS 图表。我如何将 LESS 添加到现有的 Angular 5 项目中,以便我可以使用此图表,以及我在哪里放置 JavaScript 以及我的 Angular 中此示例中对 LESS 文件的引用零件? JSFiddle包含在下面。
JavaScript:
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
我没有最好的解决方案,但它适合我。由于我没有节点服务器,我所做的是在项目中有 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'] })