doesn't reload css after .twig refresh..

[LorenzoDossi]

when I change+save a .twig file, the css on the website disappear.. is it something that you are experiencing too ? please let me know.. thanks!

[LorenzoDossi]

feel free to book a call if you wanna discuss this problem a bit further https://cal.com/lorenzodossi/30min

[mandrasch]

Hi!

Please provide more context

• ddev version (ddev -v)
• operating system
• craftcms version
• craftcms vite plugin version
• vite version

Do you use my example repository or your own custom implementation?

[LorenzoDossi]

sure!

• ddev version v1.23.0
• macos sonoma 14.3.1
• "craftcms/cms": "^5.0.0",
• "nystudio107/craft-vite":"^5.0.0",
• "vite": "^5.1.4"

here is a short video showcasing the problem -> https://streamable.com/6gesiq edit html -> all good edit scss -> all good edit html again -> doesn't work -> need to reload manually the page

[mandrasch]

Hey,

thanks for detailed description + video! 👍

First of all: Twig reloading is not really "Hot Module Replacement" (hmr) in craftcms vite plugin, the whole page needs a reload after twig changes (because twig is not tighly integrated like css changes in Vite). But this is done automatically - if ...

Second: After you run ddev npm run dev, you need to reload your browser manually once to get the Vite dev server active. Otherwise manifest.json from previous builds will be used. See config/vite.php:

// this will ping $devServerInternal to make sure it's running, 
// otherwise it falls back to web/dist/manifest.json
'checkDevServer' => true,

You can check in devtools if Vite connected - or not:

When you use browser reload once after ddev npm run dev - and Vite devserver is connected, each twig change should cause a browser refresh automatically:

https://github.com/mandrasch/ddev-craftcms-vite/assets/777278/a8a4b914-077f-48c1-849f-4bd8d687d1fc

This is handled by https://www.npmjs.com/package/vite-plugin-restart, see vite.config.js

plugins: [
        ViteRestart({
        restart: [
            './templates/**/*',
        ],
    })]

Hope that helps?

[LorenzoDossi]

"Second: After you run ddev npm run dev, you need to reload your browser manually once to get the Vite dev server active." that was the problem! Thanks immensely

btw if you need some help related to css/motion stuff, don't hesitate to hit me up, I owe you a favor! https://www.lorenzodossi.com/

[mandrasch]

Happy to help! 👍