vite incorrect CSS order after build when manualChunk is used

Describe the bug

backgound:

The project needs a third party lib css ( libs/pink.css), so I include the file in the main.js, and make it as a manual chunk with vite.config.js:

// third party lib css
import './libs/pink.css';

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('libs/pink.css')) {
            return 'vendor-pink';
          }
        },
      },
    },
  },

then I need to override some selector , so I add selector in App.vue ,

// app.vue
<style>
body {
  background: lightblue;
}
</style>

The Problem:

In dev mode, npm run dev and the body background color is "lightbue". And this is what I want. But after I run build command (npm run build , npm run preview), the page background color is "pink". Because in vendor-pink.css is injected behide index.css:

// file: dist/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index.5988f3cb.js"></script>
    <link rel="stylesheet" href="/assets/index.94bf859f.css">
    <link rel="stylesheet" href="/assets/vendor-pink.52a267b7.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

How

As I known, pink.css is treated as a "vendor" asserts, then it should be injected before index.css. how can i achive this ? like

    <script type="module" crossorigin src="/assets/index.5988f3cb.js"></script>
    <link rel="stylesheet" href="/assets/vendor-pink.52a267b7.css">
    <link rel="stylesheet" href="/assets/index.94bf859f.css">

Reproduction

https://stackblitz.com/edit/vitejs-vite-21apjj?file=dist%2Findex.html&terminal=dev

System Info

❯ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
success Install finished in 1.522s


  System:
    OS: Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: Unknown - /bin/jsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^2.0.0 => 2.0.1 
    vite: ^2.7.2 => 2.7.10

Used Package Manager

npm

Logs

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 reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

Jan 04 '22 08:01 mutongwu

Hey there. I am also facing same issues. Is there a way to solve this?

Jan 31 '22 10:01 akhilmhdh

also want to known how to solve this

Feb 25 '22 08:02 wangfengyuan

I have the same problem, but when I upgrade vite to '2.9.0-beta.2' and modify 'vite.config.ts', it will return to normal

If you still return 'vendor-pink', it will not take effect

https://stackblitz.com/edit/vitejs-vite-1pgemr?file=vite.config.js&terminal=dev

Mar 16 '22 09:03 hanaTsuk1

+1

Jun 28 '22 14:06 consegrado

same issues

Apr 25 '24 09:04 mrenwu

There are two lines should be took cared: 1. build: { cssCodeSplit: true, } 2. imported external css should be place before your imported main component. 3. manual chunks the imported the external css or scss into a verder.css like: manualChunks(id) { if (id.includes('node_modules/xxx/src') && id.includes('.scss')) { return 'vendor'; } } which will be linked the index.html and check the external and your internal css order should be right.

May 27 '24 09:05 BranceLee