如何使用 Angular CLI 添加应用程序范围的 CSS 文件?

问题描述

我想向我的 Angular 2 应用程序添加一些分片样式，例如字体和配色方案，这些内容将在任何地方使用.过去，我总是通过在索引页中添加这样的标签来做到这一点:

I want to add some shard styling to my Angular 2 app, things like fonts and color schemes that will be used every where. In the past I have always done this by adding a tag like this to my index page:

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

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

This doesn't work with whatever the CLI is using to serve the app. I tried manually adding the css files to the dist folder after building, but that doesn't seem to work either.

我也尝试在 anugular-cli-build.js 文件夹中添加 css

I also tried adding the css in the anugular-cli-build.js folder like this

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

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

It still doesn't seem to build the files in the css folder out when I tell it to build.

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

The style sheet in question is meant to be the base line styles for the entire app and not something I want to have to include in the styleUrl tag.

推荐答案

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

the vendorNpmFiles configuration is for telling the cli build which node_modules to copy into the dist directory.

我能够在我的 src 目录中创建一个resources"目录，将我的应用程序范围的 css 文件放在那里，然后它被复制到 dist 构建中，无需任何进一步的配置.

I was able to just create a 'resources' directory in my src directory, put my app-wide css file in there, and it was copied over to the dist build without any further configuration.

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

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

If you're trying to include a framework like bootstrap, then yeah, you can use the vendorNpmFiles configuration to copy it from your node_modules:

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

那么您在 index.html 中的引用将是:

Then your reference in your index.html would be:

<script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

这篇关于如何使用 Angular CLI 添加应用程序范围的 CSS 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！