如何添加外部CSS文件 - styleUrls - Angular 5組件

Question

我在另一個父應用程序的子目錄中有一個Angular 5應用程序。

父應用程序是一組JSP，以及其他angularJs應用程序......等。

我要做的是將來自此父應用程序的CSS文件包含到Angular 5應用程序的一個組件中。

 @Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: [....] //Here }) 

可能嗎 ？

我看了這個問題：將外部css樣式加載到已經問過的Angular 2 Component中 ，但它與我的情況不符。

謝謝你的幫助

Answer 1

請嘗試以下方法：

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

您的文件將是一個SCSS文件： myform.scss 。

然后你可以像這樣導入一個外部的css文件：

@import "my-external-stylesheet.css"; // this on the top of `my-form.scss`

Answer 2

在子應用程序的.angular-cli.json文件中，查找應用程序的styles屬性。 在那里添加父CSS的路徑。

以下是JSON配置的示例。

 "apps": [
    {
      "styles": [
        "../../../../apec-template-bootstrap-responsive/src/main/resources/css/old-apec.css",
        "styles.css"
      ],
    }
  ],

這應該為您的孩子申請從父母那里獲得您需要的任何風格。

Answer 3

你的styleUrls可以是默認的：

styleUrls: './my-form.component.css'

在my-form.component.css中，您可以導入所需的CSS文件：

@import ".../component.css";