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

【问题标题】：How to add external CSS files - styleUrls - Angular 5 component如何添加外部 CSS 文件 - styleUrls - Angular 5 组件
【发布时间】：2018-09-23 23:11:26
【问题描述】：

我在另一个父应用程序的子目录中有一个 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 已经问过了，但它不符合我的情况。

感谢您的帮助

【问题讨论】：

您提到的链接中的答案有什么问题？
@David：他们使用的是 url 而不是路径..
css 文件在构建时可用吗？或者只是在运行时，一旦应用程序被嵌入
是的，它在构建时可用
原理是一样的，你可以在组件的styleUrls数组中添加，或者如果你使用它，可以在.angular-cli样式设置中添加。您只需要提供正确的相对路径

标签： javascript css angular angular-cli angular-components

【解决方案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`

【讨论】：

“我想要做的是将这个父应用程序中的 CSS 文件包含到 Angular 5 应用程序的组件中”，这意味着您要将外部 CSS 文件包含到 Angular 中零件。因此，如果您将 CSS 文件包含到组件的 SCSS 文件中……这不是您想要的吗？也许我错过了什么......

【解决方案2】：

你的 styleUrls 可以是默认的：

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

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

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

【讨论】：

【解决方案3】：

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

这是 JSON 配置的示例。

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

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

【讨论】：

我在使用这个时遇到这个错误：Module not found: Error: Can't resolve '...path to my css...' in '...我的 Angular 5 应用程序的路径...'
您的路径设置错误。该路径相对于.angular-cli.json 文件的位置。
您的样式数组中的路径是什么？
以及您要添加的 css 文件的绝对路径？
更新了我的答案。