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

在您的子应用程序的.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";

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

3 个答案: