Laravel Mix – arbeiten mit Sass

Ihr möchtet in eurem Laravel Projekt mit Sass oder Less oder PostCss arbeiten. Kein Problem, dass Zauberwort heißt: Laravel Mix. Geht zuerst in euer Root Verzeichnis eures Laravel Projektes. Dort schauen wir uns die webpack.mix.js mal an.

Wichtig sind jetzt diese Zeilen:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Das sagt uns dass wir unsere Sass Dateien alle in den Ordner resource/sass/ packen sollen. Eine Sass Datei ist dort bereits und zwar die app.scss. Danach wird der Zielordner angegeben. Dieser ist public/css. Dort werden dann alle kompilierten Style Dateien kopiert. In diesem Fall dann app.css. Nun möchten wir eine weitere Styledatei names customstyles.css hinzufügen. Mit folgenden Schritten wird das gemacht:

1. Im webpack.mix.js erweitern wir den mix.js um: .sass(‘resources/sass/customstyles.scss’, ‘public/css’);
Also:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/customstyles.scss', 'public/css');

2. Im Ordner Resource/sass erstellen wir eine neue Datei namens: customstyles.scss und schreiben unser Stylecode dort rein.

3. Im HTML Template muss ja die Datei im Header auch eingebunden werden.

Also fügen wir im Header ein:

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

Kompilieren wird über:

3. Kompilieren

npm run dev

Wer nicht ständig bei jeder Änderung ein NPM Command absetzen möchte, kann es hier auch leichter haben mit:

npm run watch

Fertig!