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

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

css angular visual-studio webpack asp.net-core

在使用Visual Studio 2017 Angular模板制作的Angular 2应用程序中添加全局css的位置,css,angular,visual-studio,webpack,asp.net-core,Css,Angular,Visual Studio,Webpack,Asp.net Core,我是Angular的新手，我使用Visual Studio 2017 Angular Spa模板创建了Angular 2应用程序我想将角度材质添加到我的项目中，在其指南中说，我必须添加以下内容：但我不知道在哪里我已将其添加到app.component.css文件中： @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500"); 但我得到一个警告：（CssLint）@import阻止并行下载，请改用

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

我想将角度材质添加到我的项目中，在其指南中说，我必须添加以下内容：

但我不知道在哪里

我已将其添加到

app.component.css

文件中：

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

但我得到一个警告：

（CssLint）@import阻止并行下载，请改用

我发现了这一点，但我认为这不适用于我的问题

在哪里可以添加样式或字体以全局使用它们？

在Angular project文件夹中，您应该访问

src/app/

。在

app

-文件夹中，您可以看到

index.html

和

style.css

。这两个文件是全局的。您可以通过

style.css

中的

@import

在

index.html

od中添加字体样式

如果您有问题，您应该在

wwwroot

文件夹中有一个

index.html

。在本文中，作者就是这样做的

例如

index.html

：

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


....
...
...

您发布的答案实际上适用于您，但首先您应该下载此字体并将其复制到您的项目目录中，以便它可以是静态资产。然后，您可以使用

webpack plugin

（）导入此文件。我不熟悉Visual Studio生成的项目，您只需将

链接

标记添加到

index.html

内部

标题

标记即可

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

...

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

他们的指导方针之一是创建一个项目

创建项目后，如果要添加角度材质，也请遵循他们的指南

关于字体问题：您不是在尝试导入样式，而是在尝试导入字体。字体位于index.html页面的头部@格雷戈把它放好了

仅将我们的CSS文件添加到webpack.config.vendor.js的nontreshakablemodules数组中，例如my 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中）

对于字体，我不知道最好的解决方案是不是在_layout.cshtml中添加一个链接@gregog say

否，这是一个使用Visual Studio 2017 SPA模板制作的角形字体。没有src文件夹或

src/app

文件夹或

index.html

文件。@VansFannel我更新了我的答案。检查wwwroot文件夹中的index.html这是一个使用Visual Studio 2017 SPA模板制作的角文件，没有

index.html

文件。这里有一个

Views\Home\Index.cshtml

。最后，我将它移动到了

View\Shared\\u Layout.cshtml

。如果我没有弄错的话，您可以将

link

标记添加到Index.cshtml，因为它还处理静态定义的标记html。

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