如何使用Angular CLI添加应用程序广泛的CSS文件？ [英] How do you add app wide CSS files using the Angular CLI?

问题描述

我想为我的Angular 2应用程序添加一些shard样式，像字体和颜色方案，将被用于每一个地方。在过去，我总是通过在我的索引页面添加一个这样的标签来实现这一点：

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.

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

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:

< link rel =stylesheettype =text / csshref =vendor / bootstrap / dist / css / bootstrap.min.css>
< script src =vendor / bootstrap / dist / js / bootstrap.js>< / script>

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