I initialized a new Svelte project with npm init vite.
Then I configured a toy preprocessor in my svelte.config.js:
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
import * as fs from 'fs';
export default {
preprocess: [
vitePreprocess(),
// This is my toy preprocessor
{
style: ({ content, filename }) => {
const cssFile = filename + ".css"
if(fs.existsSync(cssFile)) {
return {
code: content + fs.readFileSync(cssFile, { encoding: "UTF-8" }),
dependencies: [cssFile]
}
} else {
return { code: content }
}
}
}
],
}
The preprocessor concatenates a CSS file onto the styles of each component. E.g. For a component named App.svelte, the preprocessor will add the contents of App.svelte.css into App.svelte's <style></style> tag.
Now I run: npm run build -- --watch. I expect a rebuild to be triggered if I edit App.svelte.css however no rebuild is triggered.
Attached is a minimal reproduction project: svelte-bug.zip
needs a case for build (call this.addWatchFile). We handle it differently during dev because these non-js dependencies would cause problems on vites modulegraph otherwise.
I initialized a new Svelte project with
npm init vite
.Then I configured a toy preprocessor in my
svelte.config.js
:The preprocessor concatenates a CSS file onto the styles of each component. E.g. For a component named
App.svelte
, the preprocessor will add the contents ofApp.svelte.css
intoApp.svelte
's<style></style>
tag.Now I run:
npm run build -- --watch
. I expect a rebuild to be triggered if I editApp.svelte.css
however no rebuild is triggered.Attached is a minimal reproduction project: svelte-bug.zip