如何添加外部 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 已经问过了，但与我的情况不符。

感谢您的帮助

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

您的 styleUrls 可以是默认的：

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

在您的 my-form.component.css 中，您可以导入您想要的 CSS 文件：

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

Answer 3

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

这是 JSON 配置的示例。

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

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

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

How to add external CSS files - styleUrls - Angular 5 component

javascript

css

angular-cli

angular-components

angular