Skip to content

CSS loaded from body fails to hot reload #469

@brianjacobs-natgeo

Description

@brianjacobs-natgeo

Describe the bug

CSS loaded via <link href /> within <body/> fails to hot reload. While putting stylesheets in the <head /> is best practice, our environment does not allow this. Vite puts stylesheet updates in the <head /> regardless so it does not override stylesheets below it. I would expect vite to:

  • Insert style updates directly after the element that creates it, rather than at the end of the <head />
  • Or, add a timestamp to the href so the browser refreshes the stylesheet directly (browsersync does this).
    <link rel="stylesheet" href="/src/test.css?TIMESTAMP"/>

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.
https://github.com/briantjacobs/test_vite

Steps taken in repo:

  • Create fresh vite app
npm init vite-app TEST_VITE
  • Add stylesheet to body:
<body>
  <link rel="stylesheet" href="/src/test.css"/>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
  • Add test.css to src folder:
body {background: green}
  • Change the css to background:red and save. Only manual reloads refresh the stylesheet. Moving the <link/> to <head/> and hot reload works great.

System Info

  • required vite version: 1.0.0-beta.3
  • required Operating System: OSX 10.14.4
  • required Node version: v12.8.0
  • Optional:
    • npm/yarn version
    • Installed vue version (from yarn.lock or package-lock.json)
    • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions