Starting a fresh project using Angular and encountering an issue. When attempting to load an external CSS file with <link>, it fails to work. However, using an internal style with @import does work!
Not working with :
<link rel="stylesheet" type="text/css" src="transmission.min.css">Working with :
<style>@import url('transmission.min.css');</style>Both my CSS and JS files are concatenated and minified with grunt. Even without this process, the result remains the same.
The CSS and JS files are located in the same directory as the root of the app :
/
/index.html
/transmission.min.css
/transmission.min.js
Here's a snippet of 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>
The CSS file consists of body{background-color: red;}
I've scrutinized my nginx configuration thoroughly and everything appears to be functioning correctly.
Even when checked with the Safari inspector, the CSS file at
http://transmission.dev/transmission.min.csshttps://i.sstatic.net/hSnz9.png
Furthermore, my Angular application loads perfectly.
Any insights or solutions would be greatly appreciated! :-D
Thank you