François Lefebvre François Lefebvre - 4 months ago 26
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

<link>
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) :

/
/index.html
/transmission.min.css
/transmission.min.js


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>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
@import url('transmission.min.css');
</style>

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

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

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




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
http://transmission.dev/transmission.min.css
.

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

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