Pls respect order of import if css output by manualChunks on build #20995
Description
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
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.