Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
stur86 opened this issue Jul 17, 2024 · 0 comments
Open

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

stur86 opened this issue Jul 17, 2024 · 0 comments

Comments

@stur86
Copy link

stur86 commented Jul 17, 2024

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/[email protected]/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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@stur86