Open mutongwu opened 2 years ago
Hey there. I am also facing same issues. Is there a way to solve this?
also want to known how to solve this
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
+1
same issues
There are two lines should be took cared:
build: { cssCodeSplit: true, }
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.
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:
then I need to override some selector , so I add selector in App.vue ,
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:
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
Reproduction
https://stackblitz.com/edit/vitejs-vite-21apjj?file=dist%2Findex.html&terminal=dev
System Info
Used Package Manager
npm
Logs
No response
Validations