Vite: <head> maintaining css links order when importing from node_modules #16696

devo-devo · 2024-05-16T19:02:01Z

devo-devo
May 16, 2024

I've got css in my index.html and it's important that one of my external css links comes after the css imported from my node modules and app css

so in development my index.html looks like:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"
        />
        <link
            rel="stylesheet"
            href="/node_modules/@private-package/library/dist/styles.css"
        />
        <link rel="stylesheet" href="/spa.css">
        <link
            rel="stylesheet"
            href="/current-theme/site.css"
        />
        <title>TrainingCamp</title>
    </head>
    <body class="font-[family-name:var(--body-font-family)] font-[number:var(--body-font-weight)] leading-[var(--body-line-height)] tracking-[var(--letter-spacing-base)] text-black">
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

But when it builds it keeps my cdn and and /current-theme/site.css in the right order
but the node modules css moves to the combined css file

<head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"
        />
        <link
            rel="stylesheet"
            href="/current-theme/site.css"
        />
        <title>TrainingCamp</title>
      <script type="module" crossorigin src="/assets/index-c085741a.js"></script>
      <link rel="stylesheet" href="/assets/index-86b94418.css">
    </head>

Looks like the css from the node_package is merged into
but it's important that the npm package styles load before /current-theme/site.css...

Feels like there must be some setting or workaround I'm missing can use to maintain this order when running vite build

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite: <head> maintaining css links order when importing from node_modules #16696

{{title}}

Replies: 0 comments

Select a reply

Vite: <head> maintaining css links order when importing from node_modules #16696

devo-devo May 16, 2024

Replies: 0 comments

devo-devo
May 16, 2024