search

tapio / live-server

A simple development http server with live reload capability.
http://tapiov.net/live-server/
4.4k stars 484 forks source link

Fails to load all CSS styles and content when using imports from CDNs #433

Open stur86 opened 1 month ago

stur86 commented 1 month ago
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

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;
}