如何使用 Angular CLI 添加应用范围 CSS 文件？

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 文件夹中的文件。

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

Answer 1

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

我能够在我的 src 目录中创建一个 'resources' 目录，将我的应用程序范围的 css 文件放在那里，并且它被复制到 dist 构建而没有任何进一步的配置.

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 2

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

基于您包含的内容：

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

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

dist
|-- framework-x.css

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

Answer 3

在最新的 ng cli 中，只需在“.angular-cli.json”中添加所需的样式和脚本，就会自动将其暴露在包中

"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"
      ],
}

如何使用 Angular CLI 添加应用范围 CSS 文件？

How do you add app wide CSS files using the Angular CLI?

css

angular-cli

angular