My main.js file (entry point) is importing _app.less. And _app.less is in turn importing several LESS files.

But, whenever I modify an imported LESS file, I can see a hmr event in the console ([vite] hmr update /src/webapp/style/_app.less), but the resulting LESS file that is loaded in the Network tab of the dev tools contains the old style (the one before I made the modification to the imported file).

It looks like the LESS is not recompiled, even though Vite detects the (indirect) change in _app.less.

When I modify _app.less directly though, the updates are immediately visible (and other files get loaded in the Network tab, like icomooon.woff).

Do some of you know why the LESS is not rebuilt before the hmr loads the file again in the Network tab?

main.js entry point

import '@/style/_app.less'

_app.less

@import "@/style/inc/base";

dev-server.js (called when running npm run dev)

const vite = await createServer({
        configFile: './vite.config.js',
        publicDir: false,
        server: {
            middlewareMode: 'html',
            cors: {
                "origin": ";,
                "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
                "preflightContinue": false,
                "optionsSuccessStatus": 204
            }
        },
    })

vite.config.js

export default defineConfig({
    hmr: {
        host: HOST,
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL(WEBAPP_SRC, import.meta.url))
        }
    },
    plugins: [
        svelte({
            configFile: false,
            preprocess: vitePreprocess()
        }),
        tailwindcss(),
    ],
    publicDir: false,
    build: BUILD_OPTS
})

I imagine it's an issue with vitePreprocess? I asked several AI chat bots, spent hours on it, looked online... Nothing worked.

Thank you kindly for any help!