Symfony Encore: CSS Hotreload

Symfony bietet eine JavaScript Bibliothek an, die eine nahtlose Integration von Webpack in ein Symfony Projekt bietet. Twig Funktionen übernehmen das korrekte einbinden der CSS und JavaScript Dateien; Webpack generiert die JavaScript und CSS Dateien mit allen verfügbaren Plugins und dem gesamten Node Ecosystem. Die Bibliothek heißt Webpack Encore (@symfony/webpack-encore).

Zum optimierten Generieren der Assets gibt es das Script npm run build. Zum Generieren während der Entwicklung gibt es neben dem Script npm run dev noch zwei weitere. 

• npm run dev generiert die Entwicklungsdateien einmal, schreibt diese in das Verzeichnis public/build  und beendet sich dann.
• npm run watch generiert die Entwicklungsdateien jedes mal neu, sobald sich eine der Dateien geändert hat und schreibt diese auch in das Verzeichnis public/build
• npm run dev-server generiert die Entwicklungsdateien auch jedes Mal neu, sobald sich diese geändert haben, hält diese jedoch im Arbeitsspeicher vor, pushed diese auf die Seite und lädt den geänderten Teil der Seite gleich neu.

Leider funktioniert dieses Hot-Reload nicht mit CSS Dateien. Sobald sich eine CSS bzw. SCSS oder SASS Datei geändert, muss die ganze Seite neu geladen werden. Mit dem folgenden Code kann die Konfiguration so geändert werden, dass das Hot-Reload auch mit CSS Dateien funktioniert.

Am Ende der Datei webpack.config.js die folgende Zeit ersetzten: module.exports = Encore.getWebpackConfig() mit:

const webpackConfig = Encore.getWebpackConfig()
if (webpackConfig.devServer) {
    webpackConfig.devServer.quiet = false; // more verbose output

    // remove css extract
    webpackConfig.plugins.shift();

    // find rules that process scss files
    for (rule of webpackConfig.module.rules) {
        if (rule.test.toString().match(/s\[ac\]ss/)) {
            if(rule.oneOf){
                for (let set of rule.oneOf) {
                    // replace mini-css-extract-plugin/dist/loader.js with style-loader
                    set.use[0] = {
                        loader: 'style-loader'
                    };
                }
            } else {
                // older webpack versions
                rule.use[0] = {
                    loader: 'style-loader'
                };
            }
        }
    }
}
module.exports = webpackConfig;

Durch entfernen des CSS Extract Plugins, was den CSS Code auf die Festplatte schreibt und durch hinzufügen des style-loaders, wird auch ein Hot-Reload von CSS erreicht.

Dann mit ./node_modules/.bin/encore dev-server --hot starten.