Twig file changes are not working with "watch" or "dev-server"

[sovetski]

I am using bootstrap and to avoid getting all unused classes for my build folder, I am also using "postcss-purgecss" which removes unused classnames.

The problem is that webpack does not load my postcss config if there is no changed files by "watch", if I add "mt-5" classname for example, it will not detect this change because it is inside a ".twig" file and not "js or css". To be able to get the "mt-5" class i need to do some changes inside "assets" or re run the "npm run watch"...

I tested this solution: https://symfony.com/doc/current/frontend/encore/dev-server.html#live-reloading-when-changing-php-twig-files

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.liveReload = true;
        options.static = {
            watch: false
        };
        options.watchFiles = {
            paths: ['src/**/*.php', 'templates/**/*'],
        };
    })

It reloads the browser on each twig file change which is cool, but it does not reloads my assets, I need to change any css or js file to be able to get my classname built

Originally posted by @sovetski in #1026 (comment)

[sovetski]

After spending some days, I found an alternative solution, you can see here: webpack/webpack#17918 (comment)

But I hope we will get an official default integrated solution

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[stof]

The builtin webpack watcher is integrated with the dependency graph.
To make this work out of the box, your postcss-purge setup would have to integrate with webpack to tell it that the CSS output depends on all those Twig files. Without that, webpack won't know that a change in the Twig file might change the CSS output.

postcss-loader supports dependencies reported from plugins but I don't know whether postcss-purge reports such dependencies. If it does not, you might need to use postcss-add-dependencies in your postcss plugins.

[stof]

Note that adding the dependency in postcss is better than using webpack-watch-files-plugin because the later restarts the full webpack compilation while the former would recompile only part of the module tree (it will recompile the CSS and modules that depend on it)