Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

incorrect CSS order after build when manualChunk is used #6375

Open
7 tasks done
mutongwu opened this issue Jan 4, 2022 · 6 comments
Open
7 tasks done

incorrect CSS order after build when manualChunk is used #6375

mutongwu opened this issue Jan 4, 2022 · 6 comments
Labels
feat: css pending triage

Comments

@mutongwu
Copy link

mutongwu commented Jan 4, 2022 •
edited
Loading

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
@akhilmhdh
Copy link

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

@wangfengyuan

This comment was marked as spam.

Sign in to view
@hanaTsuk1
Copy link

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

@silverwind silverwind mentioned this issue Jun 23, 2022
Open
7 tasks
@consegrado

This comment was marked as spam.

Sign in to view
@BiosSun BiosSun mentioned this issue Jul 8, 2022
Closed
7 tasks
@sapphi-red sapphi-red changed the title vendor css injected with wrong order after build incorrect CSS order after build when manualChunk is used Aug 20, 2023
@sapphi-red sapphi-red mentioned this issue Aug 20, 2023
Closed
7 tasks
@mrenwu
Copy link

mrenwu commented Apr 25, 2024

same issues

@joy-yu joy-yu mentioned this issue May 11, 2024
Closed
@BranceLee
Copy link

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.

This was referenced Jun 17, 2024
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feat: css pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@mutongwu @consegrado @Niputi @mrenwu @wangfengyuan @akhilmhdh @BranceLee @hanaTsuk1