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

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

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

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

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

但是我从来没有创造过一种颜色

---

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

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

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

然后将文件放在项目根目录下的css目录中

我强烈建议将样式分解，并将样式与适当的组件相关联。22000行CSS非常庞大，如果没有太多冗余代码，我会感到惊讶。为了构建一个可维护的应用程序，你必须处理好这一点，而一开始就是最好的时机

---

至于为什么文件在放置时抛出错误，可能是您的web包配置中有处理css文件的内容，或者需要scss文件，但没有正确处理css文件，很难说没有看到更多您的项目。

我建议您将样式表添加到angular cli.json

styles

数组中，以便angular应用程序直接引用

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

---

但是，正如@史蒂芬所指出的，你应该考虑将样式表分解为多个文件，然后可以使用多个角度特征，如代码>视图封装>代码>…同时在层次结构上下修改样式表

您发布的代码看起来是正确的。考虑通过你的应用程序搜索<代码> App.Too.TS<代码>，看看它是否在某个地方被定义。你在项目中有其他的组件、服务、类等吗？检查所有的错误文件，你是否使用角式剪辑，因为我可以：没有“HTML样式表”或“HTML中的样式表”之类的东西。它是CSS还是不是。我首先使用大文件来确保我的应用程序在基本版本中正常运行。然后，我将开始剪切样式，并将每个样式指定给它自己的组件。这是我需要编辑的一大块遗留代码，作为更新此网站的一部分。那么，您是否建议我将其分解为一个资产集合，我可以链接到需要它的组件？（例如color.css、fonts.css等）每个项目都会有所不同。我会寻找为所有内容定义规则的基本样式，并将它们迁移到app.css文件中，然后寻找特定于某个页面或部分的css部分，看看是否可以将它们断开。大量css文件的存在通常是因为编码人员将每个页面都视为例外，并添加了特定于页面的样式，而不是使用较少的更通用的样式来强制整个项目的一致性。清理东西需要很多工作，但是试着理解为什么会有风格，这将帮助你找到一个放置它们的地方。

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