5

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

4

3 回答 3

14

在最新的 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"
      ],
}
于 2017-04-29T16:56:20.317 回答
6

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>

于 2016-05-26T15:33:55.847 回答
3

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

根据您包含的内容：

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

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

dist
|-- framework-x.css

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

于 2016-05-27T03:02:45.043 回答