[BUG] --watch Lib Mode style.css not regenerated

[JonathanSchndr]

Describe the bug

If a JS file is specified as the target in Lib Mode, CSS / SCSS can also be imported in the JS file. This CSS file is taken during the first creation and generates a style.css. But if you add a --watch parameter, new files are generated, even if there are changes in the CSS files, but no new CSS file.

Reproduction

export default {
  mode: 'development',
  build: {
    emptyOutDir: false, // workaround to prevent a missing style.css after the regeneration with --watch
    lib: {
      entry: './src/lib.js',
      name: 'Lib'
    },
  }
}

System Info

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

npx: Installierte 1 in 1.072s

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 2.79 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.12 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Edge: 89.0.774.45
    Firefox: 86.0.1
    Safari: 14.0.3
  npmPackages:
    vite: ^2.3.4 => 2.3.4 

Used package manager: npm

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.

[klongmitre]

I'm seeing something similar with png files as well (see below). I was seeing this css issue with version 2.3.4 which does not appear to occur with version 2.3.3. With 2.3.3, it's other assets like the logo.png file shown below.

$ ❯❯❯ npm run build-watch                                                                                                                             

> ui@0.0.0 build-watch
> TAILWIND_MODE=watch vite build --watch

vite v2.3.3 building for production...

watching for file changes...

build started...
transforming (10) node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
✓ 13 modules transformed.
dist/assets/logo.03d6d6da.png    6.69kb
dist/index.html                  0.47kb
dist/assets/index.fd198fc1.js    0.89kb / brotli: 0.47kb
dist/assets/index.ee2bacce.css   3.28kb / brotli: 1.12kb
dist/assets/vendor.a5b3ff50.js   42.43kb / brotli: 15.33kb
built in 2537ms.

build started...
✓ 13 modules transformed.
dist/index.html                  0.47kb
dist/assets/index.fd198fc1.js    0.89kb / brotli: 0.47kb
dist/assets/index.ee2bacce.css   3.28kb / brotli: 1.12kb
dist/assets/vendor.a5b3ff50.js   42.43kb / brotli: 15.33kb
built in 1268ms.

[fabd]

Thank you for reporting this.

I also came across this issue, for context if that's helpful :

I use Vite to build the frontend assets in a legacy Symfony php application. I import all the stylesheets in the entry files, so that they are compiled & "chunked" by the build process (as well as merged with the Tailwind JIT 's own output).

I can use dev server in my php app, which is great, by including the VIte client and the raw .ts entry files and let Vite resolve everything.

But sometimes the "flash of unstyled content"; due to importing stylesheets in my entries, is annoying. So sometimes I run my app in a semi-production mode whereby php renders JS/CSS tags using the output files from manifest.json (as it would in production mode). It's still pretty fast to work like this with vite build --watch, which is great!

So that's how I noticed the issue. On first run, vite build --watch renders correct manifest.json. However after I edit a JS/TS file, you can see in the CLI it rebuilds the entries & associated chunks, but all the CSS chunks are skipped. Which is good for speed I guess; but it seems as a side effect that those files do not get output in manifest.json. Therefore, when I hit F5 (refresh page) in my php site, it no longer includes the CSS dependencies, and if I navigate to another php page with a different JS/TS entry file; it looks broken as php no longer outputs the stylesheet dependencies.

[klongmitre]

I didn't like the ever growing dist folder (and sometimes it didn't suffice), so I got around it by using nodemon as my watcher and having nodemon execute a vite build. It's not ideal, but works great for my situation (which is volume mounting the dist into a container running an express app, which serves the site with express.static()

[navin-moorthy]

Same, I also faced the issue that I had to solve using the nodemon.

[geidelguerra]

Same here. If a run vite build --watch and something changes, my css files are skipped.

[thomasschuiki]

I believe I am facing the same issue. The first vite build --watch --emptyOutDir generates the CSS files. The next run empties the output-directory and the CSS files are not regenerated. Without the --emptyOutDir parameter the file is not regenerated as well, which is no problem, but the CSS file is also no longer referenced in the generated index.html file. So there is definitely something fishy going on.

Runlog:

> vite build --watch --emptyOutDir

vite v2.3.7 building for production...

watching for file changes...

build started...
✓ 36 modules transformed.
../dist/ui/assets/logopetrol.f1d4e2ac.png   6.81kb
../dist/ui/assets/bg.4e827ca0.jpg           108.03kb
../dist/ui/index.html                       0.52kb
../dist/ui/assets/index.fb6c59b0.css        1.22kb / brotli: 0.50kb
../dist/ui/assets/index.d7ade2b6.js         3.24kb / brotli: 1.27kb
../dist/ui/assets/vendor.e93ba4e6.js        177.18kb / brotli: 38.10kb
built in 5009ms.

build started...
✓ 36 modules transformed.
../dist/ui/assets/bg.4e827ca0.jpg           108.03kb
../dist/ui/assets/logopetrol.f1d4e2ac.png   6.81kb
../dist/ui/index.html                       0.46kb
../dist/ui/assets/index.d7ade2b6.js         3.24kb / brotli: 1.27kb
../dist/ui/assets/vendor.e93ba4e6.js        177.18kb / brotli: 38.10kb
built in 3434ms.

The problem also exists when not emptying out the output-dir:

> vite build --watch

vite v2.3.7 building for production...

watching for file changes...

build started...

(!) outDir /xxx/dist/ui is not inside project root and will not be emptied.
Use --emptyOutDir to override.

✓ 36 modules transformed.
../dist/ui/assets/logopetrol.f1d4e2ac.png   6.81kb
../dist/ui/assets/bg.4e827ca0.jpg           108.03kb
../dist/ui/index.html                       0.52kb
../dist/ui/assets/index.fb6c59b0.css        1.22kb / brotli: 0.50kb
../dist/ui/assets/index.8f2477b2.js         3.18kb / brotli: 1.25kb
../dist/ui/assets/vendor.e93ba4e6.js        177.18kb / brotli: 38.10kb
built in 4358ms.

build started...

(!) outDir /xxx/dist/ui is not inside project root and will not be emptied.
Use --emptyOutDir to override.

✓ 36 modules transformed.
../dist/ui/assets/bg.4e827ca0.jpg           108.03kb
../dist/ui/assets/logopetrol.f1d4e2ac.png   6.81kb
../dist/ui/index.html                       0.46kb
../dist/ui/assets/index.8f2477b2.js         3.18kb / brotli: 1.25kb
../dist/ui/assets/vendor.e93ba4e6.js        177.18kb / brotli: 38.10kb
built in 3785ms.

My vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: "../dist/ui"
  },
})

Env Info:

$ node -v   
v16.3.0
$ npm -v
7.17.0

package.json

...
  "dependencies": {
        "pinia": "^2.0.0-alpha.19",
        "scorm-again": "^1.6.0",
        "vue": "^3.0.5"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.2.3",
        "@vue/compiler-sfc": "^3.1.1",
        "vite": "^2.3.7"
    }

[tiltysola]

I faced the same issue.

First build:

[f2e] [client] backend/public/client/index.html                  0.49kb
[f2e] [client] backend/public/client/assets/index.baa23e53.css   0.35kb / brotli: 0.15kb
[f2e] [client] backend/public/client/assets/index.41541b39.js    1.40kb / brotli: 0.51kb
[f2e] [client] backend/public/client/assets/vendor.78d570ea.js   160.43kb / brotli: 45.36kb

Modify app.tsx for example:

[f2e] [client] backend/public/client/index.html                  0.44kb
[f2e] [client] backend/public/client/assets/index.41541b39.js    1.40kb / brotli: 0.51kb
[f2e] [client] backend/public/client/assets/vendor.78d570ea.js   160.43kb / brotli: 45.36kb

Modify global.less for example:

[f2e] [client] backend/public/client/index.html                  0.49kb
[f2e] [client] backend/public/client/assets/index.61470a09.css   0.03kb / brotli: 0.03kb
[f2e] [client] backend/public/client/assets/index.fccb31b0.js    1.40kb / brotli: 0.51kb
[f2e] [client] backend/public/client/assets/vendor.78d570ea.js   160.43kb / brotli: 45.36kb

Although css file has been regenerated, but IT HAS ONLY global.less RECOMPILED, other less files are not in it at all.

[patak-dev]

@AlishaHawkward would you check your project with this PR #3747? It should also fix this bug.

[patak-dev]

This should be fixed by #3747 and #3887, please comment if this is still an issue for you with the latest version of Vite.

[fabd]

Thank you very much! Works here 👍

Probably unrelated but does anyone else sometimes have vite build --watch runs twice in a row? I noticed this happen with VSCode, I am using macOS M1, vite runs inside a arm64 image of Ubuntu with Docker Desktop silicon build. It doesn't seem to happen with Sublime Text, might have to do with hopw the file is modified/updated through a docker volume?