如何使用Angular CLI添加app宽的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当我告诉它构建时,它似乎仍然没有在文件夹中构建文件.

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

Answer 1

在最新的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"
      ],
}

Answer 2

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

我能够在我的src目录中创建一个'resources'目录,将我的app-wide 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>