Why isn't Angular rendering my css?

Question

I have an issue with angular2-seed app where it can't seem to render my css when i put it in index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= APP_TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <link rel="stylesheet" href="css/material.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- endinject -->
</head>
<body>

<div class="mdl-badge">Hello</div>
<sd-app>
  <div class="mdl-spinner"></div>
</sd-app>

Im pointing to the correct path to the css file but when i use any class, it just doesn't render at all
I tried <link rel="stylesheet" href="../../node_modules/material-design-lite/material.css"> which shouldn't make any difference, but got the same result

Edit

Here's how my project looks like, I've moved the css and js to the src, hope its clearer now

Your help is much appreciated.

check the network tab in the dev tools , it might gives an error on it — Anas Omar
– Anas Omar, Commented Sep 25, 2016 at 7:49
Yeah I've also done that, noticed that my css file is not being loaded, but what i can't understand is why? — Bisho Adam
– Bisho Adam, Commented Sep 25, 2016 at 7:52
Did you check angualr working properly with a browser debugger? Sometimes, I exprience that css isn't loaded if angular generating error — astrohsy
– astrohsy, Commented Sep 25, 2016 at 7:53
What error are you getting in the network tab now that you have moved the file into the project folder? Also can you access material.css by entering its supposed URL into the browser address bar? — Ma3x
– Ma3x, Commented Sep 25, 2016 at 8:24
What a silly thing to do >.< i've put my css inside the `  ` while i am not using gulp. Moved my css reference outside the inject and it worked fine — Bisho Adam
– Bisho Adam, Commented Sep 25, 2016 at 8:30

Soviut · Accepted Answer · 2016-09-25 08:01:07Z

1

This has nothing to do with Angular. The path to your css/material.css must be incorrect.

You need to have a /css directory in the same directory you're hosting your web server from. So if your project is in /myproject you need to have a /myproject/css folder.

The path MUST be relative to your root folder. If it isn't, then css/material.css will not work, because without a / forward slash at the beginning, the root is relative to the current folder.

As was mentioned in the comments, you can enter the exact path into your address bar in the browser to see if that css file will load. If it doesn't, you've got a path issue. This can most likely be resolved by appending ../ to travel down a directory, or appending / to make the path absolute to the root of the web server.

edited Sep 25, 2016 at 8:01

answered Sep 25, 2016 at 7:48

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bisho Adam Over a year ago

I know that, and as i stated, I'm pointing to the correct path to my css file

Ma3x Over a year ago

@BishoAdam: but is that path inside your webhosted folder? The relative path ../../node_modules/... could easily be outside. An easy way to check is to enter the path to the css into the address bar and see if it will fetch it.

Collectives™ on Stack Overflow

Why isn't Angular rendering my css?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related