Skip to content

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

Description

@stur86
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-server version: 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;
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions