vite
vite copied to clipboard
vitejs
Pls respect order of `import` if css output by `manualChunks` on build
Description
when i want some (big) css (usually in node_modules) to be output alone by manualChunks (usually for better cache) , its final order in index.html is what i don't expect.
e.g.
the directory looks like
- src
- base.css
- main.ts
- vite.config.ts
in main.ts
import 'animate.css';
import './base.css';
in vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
console.log(id);
if (/node_modules\/animate.css/.test(id)) return 'animate';
},
},
},
},
});
after vite build, the css link order in dist/index.html be like
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" crossorigin href="/assets/index.css">
<link rel="stylesheet" crossorigin href="/assets/animate.css">
</head>
</html>
but what i need is that animate.css should be before index.css
here's a simplest demo for reproduction
just run npm run build or yarn build and the final css link order in dist/index.html is unexpected
Suggested solution
respect the original import order
Alternative
or introduce new way to manually order? e.g. in main.js
import 'animate.css?order=0'
import './other.less?order=1'
import './base.scss'
in vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (/node_modules\/animate.css/.test(id)) return 'animate';
if(id.endsWith('src/other.less')) return 'other';
},
},
},
},
});
then after build the css link order in dist/index.html is expected
<link rel="stylesheet" crossorigin href="/assets/animate.css">
<link rel="stylesheet" crossorigin href="/assets/other.css">
<link rel="stylesheet" crossorigin href="/assets/index.css">
Additional context
No response
Validations
- [x] Follow our Code of Conduct
- [x] Read the Contributing Guidelines.
- [x] Read the docs.
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
