如何将css导入到角度为4的组件中

Question

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

请帮我把css添加到组件中。谢谢大家：D

Answer 1

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

例如在上面你把一个css文件放在src / assets / css / general_style.css中，然后

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

Answer 2

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

"styles": [
  // relative link
]

Answer 3

您键入了错误的路径。 asset =＆gt; 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 文件中（因为您使用的是角度v4）。

3. 另一种方法是，如果你想将CSS文件导入另一个CSS，那么你可以使用完整路径简单地导入这样的语法

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