在使用 Visual Studio 2017 Angular 模板制作的 Angular 2 应用程序中添加全局 CSS 的位置答案

【问题标题】：Where to add global css in an Angular 2 application made with Visual Studio 2017 Angular template在使用 Visual Studio 2017 Angular 模板制作的 Angular 2 应用程序中添加全局 CSS 的位置
【发布时间】：2018-06-03 20:14:17
【问题描述】：

我是 Angular 新手，我使用 Visual Studio 2017 Angular Spa 模板创建了一个 Angular 2 应用程序。

我想将 Angular Material 添加到我的项目中，并且在其指南中说我必须添加这个：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

但我不知道在哪里。

我已将其添加到 app.component.css 文件中：

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");

但我收到警告：

(CssLint) @import 防止并行下载，改为使用。

我找到了这个answer，但我认为它不适用于我的问题。

在哪里可以添加样式或字体以在全球范围内使用它们？

【问题讨论】：

标签： css angular visual-studio webpack asp.net-core

【解决方案1】：

由于您是 Angular 的新手，我只能建议您遵循他们的指导方针。

他们的指导方针之一是创建一个项目using the Angular CLI。

创建项目后，如果您想添加 Angular 材质，也请按照他们的指南进行操作。

关于您的字体问题：您不是在尝试导入样式，而是在尝试导入字体。字体进入 index.html 页面的头部。 @Gregor 放置得很好。

【讨论】：

【解决方案2】：

在您的 Angular 项目文件夹中，您应该到达 src/app/。在app-文件夹中，您可以看到index.html 和styles.css。所以这两个文件是全局的。您可以在index.html 中添加字体样式，或者通过@import 在styles.css 中添加字体样式。

如果您提出问题，您的wwwroot 文件夹中应该有一个index.html。在this example，作者这样做了。

例如index.html:

<html>
  <head>
    ....
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    ...
  </head>
  <body>
    ...
  </body>
</html>

【讨论】：

不，这是使用 Visual Studio 2017 SPA 模板制作的 Angular。没有src文件夹，或者src/app文件夹或者index.html文件。
@VansFannel 我更新了我的答案。检查 wwwroot 文件夹中的 index.html

【解决方案3】：

您发布的答案实际上适用于您，但首先您应该下载此字体并将其复制到您的项目目录中，以便它可以成为静态资产。然后您可以使用webpack plugin (look here) 导入此文件。我不熟悉 Visual Studio 生成的项目，您只需将 link 标记添加到 index.html 内的 head 标记即可。

<html>
<head>
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
...
</html>

【讨论】：

这是一个使用 Visual Studio 2017 SPA 模板制作的 Angular，没有index.html 文件。有一个Views\Home\Index.cshtml。
最后，我把它移到了View\Shared\_Layout.cshtml。
如果我没记错的话，你可以在 index.cshtml 中添加link 标签，因为它也处理静态定义的标签html。

【解决方案4】：

仅将我们的 CSS 文件添加到 webpack.config.vendor.js 的 nonTreeShakableModules 数组中，例如我的 webpack.config.vendor 就像

const nonTreeShakableModules = [
    'bootstrap-css-only/css/bootstrap.css',
    'font-awesome/css/font-awesome.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill'
];

那是因为你有（在同一个 webpack.config.vendor 中）

const clientBundleConfig = merge(sharedConfig, {
        entry: {
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
    }

如果是字体，我不知道最好的解决方案是否只是像@Gregorg 所说的那样在 _layout.cshtml 中添加一个链接

【讨论】：