Symfony 4.1 | CSS + JS Management (Webpack)

Nachdem wir ein User-Entität erstellt haben und eine Authentifizierung haben möchten wir das ganze nun noch optisch etwas aufpeppen.

Webpack installieren

Symfony hat dafür ein eigenes Package welches sich webpack-encore nennt, das installieren wir mit

composer require symfony/webpack-encore-pack

EDIT: 11.2018
Seit kurzem ist das encore-pack nicht mehr notwendig, Ihr könnt einfach folgenden Befehl nutzen.

composer require encore

Danach führt Ihr ein yarn install im Root Verzeichnis aus – welches neben der webpack.config.json und einem yarn.lock noch einen assets Ordner erzeugt. Für eine detailierte Doku schaut einfach bei Symfony vorbei.

Im Grunde definiert Ihr in der webpack.config.json den Einstiegspunkt in unserem Fall die /assets/js/app.js in welcher alle benötigten Dateien eingebunden werden (JS/CSS) require(‚../css/app.css‘) zum Beispiel.

Dateien kompilieren

Das ganze müssen wir dann noch kompilieren – die Befehle dazu findet Ihr in der package.json im Root Verzeichnis. Ich nutze hauptsächlich  

yarn encore dev --watch

damit wird ein Filewatcher aktiviert, welcher bei Änderungen neu kompiliert.

Wenn Ihr Live geht nutzt Ihr

yarn encore production

Template

Aber wo ist das ganze nun? Das kann webpack-encore Package nicht – macht auch keinen Sinn, da man sicherlich an verschiedenen Punkten seine Styles einbinden möchte.

CSS

<link rel="stylesheet" href="{{ asset('build/app.css') }}">

JS

<script src="{{ asset('build/app.js') }}"></script>

CSS Preprocessors

Ich möchte nicht zu sehr ins Detail gehen und hier nur kurz zeigen wie Ihr LESS einsetzt.

yarn add less less-loader

Danach packt Ihr einfach eine .less File in den css oder in einen neuen less Ordner (in assets) und passt die Datein in der /var/www/kitchen/assets/js/app.js an.

Damit yarn encore dev weiß was es mit der .less File machen muss müsst Ihr noch 

.enableLessLoader()

in Encore der webpack.config.js packen.

Et voila – nach dem erneuten ausführen von yarn encore dev habt Ihr eure .less Datein eingebunden.

Fontawesome

Ich nutze für Icons gerne Fontawesome – das könnte Ihr in eurem Projekt einfach über yarn oder npm installieren. Je nachdem ob Ihr die Free oder Pro Version nutzt (wichtig, bei der Pro Version müsst Ihr euch erst registrieren)

yarn add --dev @fortawesome/fontawesome-free

oder

yarn add --dev @fortawesome/fontawesome-pro