Question

我正在制作一个Angular网络应用来取代现有的网站。说现有的网站已经有一个样式表，因为Angular允许我将我的前端代码直接复制并粘贴到新的应用程序中，我想使用相同的样式表。但它的近22,000行很长，所以把它内联是不可能的。

我将其添加到我的文件目录并将其添加到我的 app.component.ts 像这样：

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.BigHugeMess.css']
})

export class AppComponent {
    title = 'app';
}

此方法导致我的应用在尝试运行时失败。说：

在当前目录
中找不到
./ app.color.ts

但我从未创建过color.ts。

将此样式表文件绑定到我的Angular应用程序的最佳方法是什么？因为我使用的方式显然不起作用。

Answer 1

如果您不打算按组件将CSS分解为更易于管理的块，而您只是寻找快速而肮脏的解决方案，则可以使用标准将CSS文件直接链接到index.html文件中stylesheet参考：

<link rel="stylesheet" href="./css/app.BigHugeMess.css">

我强烈建议打破样式并将样式与适当的组件相关联。 22,000行的CSS非常庞大，如果那里没有很多冗余代码，我会感到惊讶。为了构建一个可维护的应用程序，您将不得不对此进行处理，并且在开始时是最好的时间。

至于为什么文件正在抛出错误，你的web pack配置中可能有一些东西在处理css文件，或者期望scss文件并且没有正确处理css文件，很难说没有看到更多你的文件项目

Answer 2

我建议您将样式表添加到angular-cli.json styles数组中，以便由角度应用直接引用。

"styles": [
        "../location of your custom stylesheet",
        "styles.css"
      ],

但正如@Stephen指出的那样，您应该考虑将样式表分成多个文件，然后您可以使用多个角度功能，如View Encapsulation等。还可以在层次结构中上下修改样式表

将Html样式表附加到Angular应用程序

2 个答案: