Css file or content will be lost in build watch

[javastation]

Describe the bug

In the build --watch mode, the first build is ok. Then you change a file that is not css, after rebuilding,the css file in dist will be lost

Reproduction

1. Clone this repo https://github.com/javastation/build-watch-css.
2. Run yarn.
3. Run yarn watch.
4. Check the dist folder after first build. It contains css file.
5. Make any changes in App.vue to trigger rebuild. Check dist folder again,css file is missing.
   If you change a.css,after rebuilding,the contents of css in dist will not include the contents of b.css.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 5.88 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.12 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.3 => 1.2.3 
    vite: ^2.3.7 => 2.3.7 

Used package manager: yarn

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[craigrileyuk]

Having this happen too. It's making watch practically unusable since you have to stop it and restart it to get your CSS back.

[karolis-sh]

It seems that the last working version is 2.3.3

[janispritzkau]

It looks like a very simple fix.

The variable hasEmitted in

vite/packages/vite/src/node/plugins/css.ts

Line 232 in 6eaec3a

let hasEmitted = false

needs to be reset at buildStart.

Edit: Unfortunately it doesn't quite fix the issue. While experimenting in lib mode, it solved the issue when you directly edit the css, so that it reappears.

And there is the problem, that the css only contains the styles from the last edited file, like explained in this issue.

[kyasu1]

It looks like a very simple fix.

The variable hasEmitted in

vite/packages/vite/src/node/plugins/css.ts

Line 232 in 6eaec3a

let hasEmitted = false

needs to be reset at buildStart.

On 2.3.8 the issue still exists but with this fix it seems to be working again for me.

[javastation]

It looks like a very simple fix.
The variable hasEmitted in

vite/packages/vite/src/node/plugins/css.ts

Line 232 in 6eaec3a

let hasEmitted = false

needs to be reset at buildStart.

On 2.3.8 the issue still exists but with this fix it seems to be working again for me.

Do you set build.cssCodeSplit = false?

[kyasu1]

Do you set build.cssCodeSplit = false?

No I am not using that option.

[javastation]

No I am not using that option.

It doesn't work for me, maybe I have overlooked something. Are you using lib mode, do you have a reproduction?

[janispritzkau]

I think we have two slightly different issues here. In my tests, I explicitly had a css entry file in lib mode.

[javastation]

I think we have two slightly different issues here. In my tests, I explicitly had a css entry file in lib mode.

Ok, thank you, I know what went wrong.

[surjithctly]

Hey all,

I'm having the same issue on 2.3.8. Apart from CSS, the rel=icon also has href=undefined.

I saw @janispritzkau provided a fix, but no idea where to apply it? If anyone fixed the CSS missing issue, how did you solve it?

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.