javascript - 如何减少对现有 Angular 5 元素的添加

Question

我有一个用于 CSS 图表的 JS Fiddle。我如何将 LESS 添加到现有的 Angular 5 元素中以便我可以使用此图表，以及在我的 Angular 组件中的何处放置 JavaScript 和对来自此示例的 LESS 文件的引用？ JSFiddle 包含在下面。

JavaScript:

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

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

Answer 1

一个典型的 Angular 组件有一个 html、一个 typescript 和一个样式文件。后者通常是 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']
  })