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

Question

我在另一个父应用程序的子目录中有一个 Angular 5 应用程序。

父应用是一套JSP，还有其他angularJs应用……等等。

我正在尝试做的是将来自该父应用程序的 CSS 文件包含到 Angular 5 应用程序的组件中。

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

可能吗 ？

我看了这个问题： Load external css style into Angular 2 Component already asked，但它不符合我的情况。

谢谢你的帮助

原文由 L Y E S - C H I O U K H 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的子应用程序的 .angular-cli.json 文件中查找您的应用程序的样式属性。在那里添加你的父 CSS 的路径。

这是 JSON 配置的示例。

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

这应该为您的子应用程序提供您需要从父应用程序获得的任何样式。

原文由 Malcor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试以下操作：

 @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`

原文由 SrAxi 发布，翻译遵循 CC BY-SA 3.0 许可协议