Skip to content

Instantly share code, notes, and snippets.

@eemeli
Created February 15, 2022 07:05
Show Gist options
  • Save eemeli/97b34dc72c886dffa25168699fe81e79 to your computer and use it in GitHub Desktop.
Save eemeli/97b34dc72c886dffa25168699fe81e79 to your computer and use it in GitHub Desktop.
Minimal reproduction for Vite bug with build.rollupOptions.external & <link rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
document.querySelector("#app").innerHTML = `
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`;
{
"name": "vite-project",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^2.8.0"
}
}
#app {
text-align: center;
background: green;
color: #2c3e50;
}
export default {
build: { rollupOptions: { external: "/style.css" } },
};
@eemeli
Copy link
Author

eemeli commented Feb 15, 2022

  1. Checkout & run npm install.
  2. Run npm run dev & open http://localhost:3000 in a browser to see "Hello Vite!" on a green background.
  3. Run npm run build && npm run preview & open http://localhost:4173.
  4. Observe that the styles are not loaded, and that the JS main thread errored due to attempting to import a CSS file.

@eemeli
Copy link
Author

eemeli commented Feb 15, 2022

Filed as issue: vitejs/vite#6931

@designervoid
Copy link

designervoid commented Feb 17, 2022

@eemeli in the dist/index.html should be link with href="/style.css"?

@eemeli
Copy link
Author

eemeli commented Feb 17, 2022

@designervoid Yes; the <link> should not get removed, as the resource it's pointing at is marked as external.

@designervoid
Copy link

@eemeli such a great feature.
I solved this problem with htmlPlugin, temporarily.

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