Question

我想在我的Angular 2应用程序中添加一些碎片样式，比如将在每个地方使用的字体和颜色方案。在过去，我总是通过在我的索引页面添加这样的标记来完成此操作：

<link rel="stylesheet" href="css/framework.css" />

这不适用于CLI用于提供应用程序的任何内容。我尝试在构建之后手动将css文件添加到dist文件夹，但这似乎也不起作用。

我还尝试在anugular-cli-build.js文件夹中添加css，如下所示

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'css/*.css'
    ]
  });
};

当我告诉它构建时，它似乎仍然没有在css文件夹中构建文件。

有问题的样式表是整个应用程序的基线样式，而不是我想要包含在styleUrl标记中的样式。

Answer 1

在最新的ng cli中，只需在＆＃34; .angular-cli.json＆＃34;中添加如下所示的所需样式和脚本。将自动以捆绑方式公开

"apps":{
 "styles": [
        "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css",
        "styles.css"
      ],
  "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
}

Answer 2

vendorNpmFiles配置用于告知cli构建哪个node_modules要复制到dist目录。

我能够在我的src目录中创建一个'resources'目录，将我的应用程序范围的css文件放在那里，然后将其复制到dist build而无需进一步配置。

src
|- app
|  |
|
|- css
|  |
|  |- framework.css
|
|- index.html

如果你想尝试包含像bootstrap这样的框架，那么你可以使用vendorNpmFiles配置从node_modules中复制它：

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'bootstrap/dist/**/*',
      ...
    ]
  }
}

然后您在index.html中的引用将是：

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

Answer 3

由于您所引用的文件（即[framework-x].css）是静态的，因此您可以利用public目录将文件直接复制到dist文件夹，而无需任何其他配置。

基于您的收录：

src
|-- public
|   |-- framework-x.css

您的文件将被移动到dist目录，如下所示：

dist
|-- framework-x.css

所以你可以直接在index.html中引用它。

如何使用Angular CLI添加app宽的CSS文件？

3 个答案: