如何在角度4中将css导入组件

Question

我想将CSS添加到组件[Angular 4]中。 我尝试通过styleUrls将其添加到“ resume.component.ts ”中，但是我无法访问资产的网址！

请帮助我将CSS添加到组件中。 谢谢大家：D

Answer 1

您必须放置文件并使用资产文件夹中的相对路径。

例如，在上面的示例中，您将一个css文件放在src / assets / css / general_style.css中，然后

<link rel="stylesheet" href="assets/css/general_style.css">

Answer 2

您可以在以下位置的.angular-cli.json （或v6的angular.json ）文件中添加css文件的相对链接：

"styles": [
  // relative link
]

Answer 3

您键入错误的路径。 asset => assets

@import '/asset/css/main_style.css';

请更改为

@import '/assets/css/main_style.css';

Answer 4

有很多方法可以将CSS文件导入Angular应用程序。

1. Angular遵循组件结构（angular cli），它将为每个组件提供CSS/HTML/TS/Spec.ts文件。 因此，您只需在@component的styleUrls属性（ 接受文件名数组 ）中添加该特定组件的CSS文件即可，只需添加文件名，而无需在其中添加完整路径。

2. 如果要在应用程序中添加一些全局CSS，则可以将其添加到.angular-cli.json文件中（就像您使用angular v4一样）。

3. 换句话说，如果要将CSS文件导入到另一个CSS中，则可以使用完整路径使用像这样的简单导入语法

    @import '/assets/css/yourstyle.css';