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

我正在制作一个Angular web应用程序来替换现有网站。说现有的网站已经有一个样式表，并且由于Angular允许我将我的前端代码直接复制并粘贴到新的应用程序中，我想使用相同的样式表。但其近22000行的长度，使其内联是不可能的。将Html样式表添加到Angular应用程序

我把它添加到我的文件目录，并把它添加到我的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应用程序的最佳方式是什么？因为我使用的方式显然不起作用。

来源

2017-07-28 RaptorJesus

的你发布的代码看起来是正确的。考虑通过应用程序搜索'app.color.ts'来查看它是否确实在某处定义。 – DeborahK

您的项目中是否有其他组件，服务，课程等？ – Vega

检查该错误的所有文件 – Sreemat

如果您不打算按组件将CSS分解为更易于管理的块，并且您只是寻找一种快速而肮脏的解决方案，则可以将CSS文件直接链接到index.html文件中标准样式表编号：

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

然后，只需将该文件放在项目根目录的css目录中即可。

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

至于为什么当文件坐落时出现错误，可能是您的网络包配置中有处理css文件，或者期望scss文件和未正确处理css文件的内容，很难说没有看到更多的你的项目。

来源

2017-07-28 23:09:12

我正在使用大文件，以确保在基本我的应用程序将起作用。那么我将开始切入样式并将每个样式分配给它自己的组件。它是一大块遗留代码，我将需要作为翻新此网站的一部分进行编辑。那么你是否会建议把它分解成一系列可以链接到需要它的组件的资产？（例如color.css，fonts.css等） – RaptorJesus

每个项目都会有所不同。我会寻找基础样式来为所有事物定义规则，并将它们迁移到app.css文件中，然后查找特定于页面或节的css部分，并查看是否可以将它们分开。大量的css文件通常存在，因为编码器将每一页视为异常并添加了页面特定的样式，而不是使用更少的更一般的样式来强化整个项目的一致性。清理东西需要做很多工作，但是要试着理解为什么风格在那里，这会帮助你找到放置它们的地方。 –

我建议你将样式表添加到angular-cli.jsonstyles数组中，直接由角度应用程序引用。

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

但是，作为@Stephen指出你应该考虑打破你的样式表将多个文件作为，那么你可以使用多个角度系统功能如View Encapsulation等，也修改样式表的上下层次

来源

2017-07-30 18:38:54

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

回答

相关问题