Question

我正在尝试在新的Angular项目中实现我在经典PHP应用程序中使用的管理模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="16x16" href="/plugins/images/favicon.png">
    <title>Ample Admin Template - The Ultimate Multipurpose admin template</title>
    <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/colors/blue-dark.css" id="theme" rel="stylesheet">      
</head>
<body>
  <app-root></app-root>
</body>
</html>

现在应用程序已正确呈现我有一些问题：

如何在Angular发行版中包含这些CSS / JS包（以及所有依赖项）？
在Angular中包含外部CSS /库的正确方法是什么？

Answer 1

顶级样式

如果您在<head>标记中显示的样式项目是顶级样式（而不是组件样式：Angular Components Styling），请在angular-cli.json中添加文件引用＆＃34;样式＆＃34;下的文件属性。

这个SO答案有一个例子：Angular - including CSS file in index.html。

您可以将多个文件放入＆＃34;样式＆＃34;您希望数组 - 当Webpack在您的应用程序初始化时运行时，这些将被添加到样式包中，然后将其放置在index.html的<head>标记中。

的WebPack

如果您需要有关如何在Angular中使用Webpack或如何配置它的一些信息，Angular文档站点有一个solid explanation。

外部CSS库

对于＆＃34;外部CSS /库＆＃34;您可以在组件中使用styleUrls属性。您可以查看“组件样式角度文档”信息here。

如何在Angular发行版中正确包含CSS / JS

1 个答案:

顶级样式

的WebPack

外部CSS库