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

In watch mode, changes in @import'ed files don't trigger CSS rebuild #3387

Closed
6 tasks done
dmitriid opened this issue May 12, 2021 · 7 comments · Fixed by #3478
Closed
6 tasks done

In watch mode, changes in @import'ed files don't trigger CSS rebuild #3387

dmitriid opened this issue May 12, 2021 · 7 comments · Fixed by #3478
Labels
pending triage

Comments

@dmitriid
Copy link

Describe the bug

Quick steps to reproduce (also see the link to repo below):

  • Create an app.css file
  • In that file, add @import "components/card.css" file
  • Run Vite in watch mode

Bug:

  • If you change anything in app.css, the CSS is rebuilt
  • If you change anything in components/card.css, nothing happens.

Re-running the watch, or rebuilding will properly rebuild the CSS. But when in watch mode, changes in @imported files don't trigger the rebuild.

Reproduction

https://github.com/dmitriid/vite-import-css-reproduction

This repo closely follows my current setup with respect to location of files, but I don't think there's anything out of the ordinary. The README shows how to run and where to look (there are two CSS files and one output file)

System Info

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

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 50.67 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Safari: 14.0.3
  npmPackages:
    vite: ^2.3.1 => 2.3.1

Used package manager: Reproduced for both npm and yarn

Before submitting the issue, please make sure you do the following
@ldexterldesign
Copy link

ldexterldesign commented May 18, 2021 •
edited
Loading

FYI

Pretty sure this regression happened within the past 8 days because this command (i.e. npx vite build --watch ) was working then

Hope this helps

Sincerely

@JonathanSchndr
Copy link

addition to this bug: if the application is in lib mode, the --watch is performed when i change the main css file, but the new css file is not generated.

@CHOYSEN CHOYSEN mentioned this issue May 20, 2021
Merged
9 tasks
patak-dev pushed a commit that referenced this issue May 24, 2021
@CHOYSEN
fix: track deps for css @import in build watch mode, fix #3387 (#3478)
13bda33
@dmitriid
Copy link
Author

Awesome! Thank you @CHOYSEN and @patak-js!

@fabd
Copy link

fabd commented May 28, 2021 •
edited
Loading

Hi guys I don't know if this is a related issue,

I noticed with vite 2.3.4 and vite build --watch, using multiple custom entries, on the initial run, I get all my JS/CSS chunks correctly in the manifest.json...

.. then if I edit one of my entry files (a .ts file), the manifest.json is regenerated, but it only includes the rebuilt JS files as shown in the CLI output of vite, and all the CSS dependencies are no longer in the manifest.json file... and therefore my php backend app does not output those deps when I refresh the page (F5).

I don't know if this is a new bug, I can try with an older vite version later this afternoon if you want.

@JonathanSchndr
Copy link

Hi guys I don't know if this is a related issue,

I noticed with vite 2.3.4 and vite build --watch, using multiple custom entries, on the initial run, I get all my JS/CSS chunks correctly in the manifest.json...

.. then if I edit one of my entry files (a .ts file), the manifest.json is regenerated, but it only includes the rebuilt JS files as shown in the CLI output of vite, and all the CSS dependencies are no longer in the manifest.json file... and therefore my php backend app does not output those deps when I refresh the page (F5).

I don't know if this is a new bug, I can try with an older vite version later this afternoon if you want.

i had open a new issue: #3566

@fabd
Copy link

fabd commented May 28, 2021

@Jutanium Ahh thank you!

ygj6 pushed a commit to ygj6/vite that referenced this issue Jun 1, 2021
@CHOYSEN @ygj6
fix: track deps for css @import in build watch mode, fix vitejs#3387 (v…
09202c4 
…itejs#3478)
@github-actions
Copy link

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.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: track deps for css @import in build watch mode(fix #3387)
4 participants
@dmitriid @fabd @JonathanSchndr @ldexterldesign