Question

我是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，但我认为它不适用于我的问题。

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

Answer 1

在Angular项目文件夹中，您应该df2=df.loc[: , :'21']。在src/app/ - 文件夹中，您可以看到app和index.html。所以这两个文件是全局的。您可以通过styles.css中的index.html在@import od中添加字体样式。

如果您有任何问题，您的styles.css文件夹中应该有index.html。在this example中，作者这样做了。

例如wwwroot：

index.html

Answer 2

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

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

一旦您创建了项目，如果您想添加Angular Material，请按照他们的指南进行操作。

关于字体问题：您未尝试导入样式，而是尝试导入字体。字体位于index.html页面的头部。 @Gregor放好了。

Answer 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>

Answer 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
        },
    }

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

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

4 个答案: