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

Posted 2023-03-06

【中文标题】如何使用 Angular CLI 添加应用范围的 CSS 文件？

【英文标题】：How do you add app wide CSS files using the Angular CLI?

【发布时间】：2016-09-24 16:53:40

【问题描述】：

我想为我的 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 标记中的东西。

【参考方案1】：

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

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

【讨论】：

这是要走的路！

将 node_modules 包中的自定义 .css 添加到我的“.angular-cli.json”中的“styles”中使用的样式列表中，当我构建应用程序时，我看到了 styles.bundle .js 正在生成。当我运行应用程序时，样式丢失了。不知道我做错了什么。我需要在 index.html 页面中添加任何引用吗？谢谢

任何人都在将其添加到 angular.json 中（为我工作）？使用 CLI，但没有找到 angular-cli.json。那是在 Angular 6 中。

【参考方案2】：

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

根据您的纳入：

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

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

dist
|-- framework-x.css

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

【参考方案3】：

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

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

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

如果您尝试包含像引导程序这样的框架，那么是的，您可以使用 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>

【讨论】：

这正是我所需要的。我将 css 文件夹与 src 文件夹放在同一级别，而不是在应用程序级别。谢谢！