François Lefebvre François Lefebvre - 1 year ago 107
AngularJS Question

External CSS file is not loading with link tag

I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with

it doesn't work but when I am using internal style with @import it does work!

Doesn't work with :
<link rel="stylesheet" type="text/css" src="transmission.min.css">

Works with :
<style>@import url('transmission.min.css');</style>

My files are located in the same directory (root of the app) :


My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.

Here is my index.html file :

<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
@import url('transmission.min.css');

<base href="/">
<body ng-app="transmission">

<div ng-view=""></div>

<script src="transmission.min.js"></script>

My CSS file just contain
body{background-color: red;}

I checked my nginx configuration twice, and everything seems to be just fine.

I also checked with Safari inspector, I can access the CSS file at

But it doesn't appears in the resources tab.

No CSS file here

Moreover my Angular application loads perfectly.

If you have any idea ? :-D

Thank you

Answer Source

link tag uses href attribute as opposed the the src as you have specified. Please change and check.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download