Where to add global css in an Angular 2 application made with Visual Studio 2017 Angular template

Question

I'm new in Angular and I have created an Angular 2 application using Visual Studio 2017 Angular Spa template.

I want to add Angular Material to my project and in its guide said that I have to add this:

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

But I don't know where.

I have add it inside app.component.css file:

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

But I get a warning:

(CssLint) @import prevents parallel downloads, use instead.

I have found this answer, but I don't think it applies to my problem.

Where can I add styles or fonts to use them globally?

Gregor Doroschenko · Answer 1 · 2017-12-21T08:04:21.940

1

In your Angular project folder you should got to src/app/. In the app-folder you can see index.html and styles.css. So this two files are global. You can add font styles in index.html od via @import in styles.css.

In case of your question you should have an index.html in your wwwroot folder. In this example the author does so.

For example index.html:

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

edited Dec 21 '17 at 08:04

answered Dec 21 '17 at 07:56

Gregor Doroschenko

11,488
5
25
37

1

No, this is an Angular made with Visual Studio 2017 SPA Template. There is no src folder, or `src/app` folder or `index.html` file. – VansFannel Dec 21 '17 at 08:00
@VansFannel I updated my answer. Check wwwroot-folder for index.html – Gregor Doroschenko Dec 21 '17 at 08:05

score 1 · Answer 2 · answered Dec 21 '17 at 08:01

Since you're new to Angular, I can only advise you to follow their guidelines.

And one of their guidelines is to create a project using the Angular CLI.

Once you've created the project, if you want to add Angular Material, follow their guide too.

About your font issue : you're not trying to import a style, you're trying to import a font. Fonts goes in the index.html page, in the head. @Gregor placed it well.

score 0 · Answer 3 · answered Dec 21 '17 at 07:57

0

Answer that you posted actually applies to you, but firstly you should download this font and copy it to your project dir so it can be static asset. Then you can import this file using webpack plugin (look here). I'm not familiar with project generated by Visual Studio you can just simply add your link tag to index.html inside head tag.

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

answered Dec 21 '17 at 07:57

Patryk Brejdak

1,571
14
26

This is an Angular made with Visual Studio 2017 SPA Template and there is no `index.html` file. There is a `Views\Home\Index.cshtml`. – VansFannel Dec 21 '17 at 08:01
Finally, I have moved it to `View\Shared\_Layout.cshtml`. – VansFannel Dec 21 '17 at 08:06
If I'm not mistaken, you can anyway add `link` tag to index.cshtml, since it also process staticaly defined tags html. – Patryk Brejdak Dec 21 '17 at 08:07

score 0 · Answer 4 · answered Dec 21 '17 at 08:25

Only add our CSS files to the nonTreeShakableModules array of the webpack.config.vendor.js, e.g. my webpack.config.vendor is like

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

That's because of you have (in the same webpack.config.vendor)

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

In case of a font I don't know if the best solucion it's simply add a link in _layout.cshtml as @Gregorg say

Where to add global css in an Angular 2 application made with Visual Studio 2017 Angular template

4 Answers4

Linked