Fails to load all CSS styles and content when using imports from CDNs #433
Description
Before submitting an issue, please, see https://github.com/tapio/live-server#troubleshooting
Issue description
I built a very simple page that imports some external resources (one Google Font in the CSS file and one JS library from a CDN). The server seems to miss content even with wait set to 500 ms and never quite render it correctly.
Software details
- Command line used for launching
live-server:live-server --cors --no-css-inject --wait=500(tried also without options) - OS: Windows 11
- Browser (if browser related): Firefox
- Node.js version: 18.18.0
live-serverversion: 1.2.2
Code to reproduce:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Stylesheet -->
<link rel="stylesheet" href="stylesheet.css" />
<!-- JS Libraries -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, voluptatibus excepturi quisquam vero nostrum esse cum placeat ipsam accusantium nemo reprehenderit tempore, repellat error officia earum quae praesentium quis non.
</div>
</body>
</html>CSS:
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
body {
font-family: "IBM Plex Mono";
background-color: black;
--fg-color: #fafafa;
/* Center all content */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.main {
color: var(--fg-color);
border: 5px double var(--fg-color);
padding: 10px;
width: 640px;
height: 480px;
}