如何添加外部 CSS 文件 - styleUrls - Angular 5 组件
Posted
技术标签:
【中文标题】如何添加外部 CSS 文件 - styleUrls - Angular 5 组件【英文标题】:How to add external CSS files - styleUrls - Angular 5 component 【发布时间】: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
样式设置中添加。您只需要提供正确的相对路径
【参考方案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 文件的绝对路径?
更新了我的答案。以上是关于如何添加外部 CSS 文件 - styleUrls - Angular 5 组件的主要内容,如果未能解决你的问题,请参考以下文章