Working With Stylesheets
Die Datei webpack.mix.js ist Ihr Einstiegspunkt für die gesamte Asset-Kompilierung. Stellen Sie sich das als einen leichten Konfigurations-Wrapper um Webpack vor. Mix-Tasks können verkettet werden, um genau zu definieren, wie Ihre Assets zusammengestellt werden sollen.
Less
Die less-Methode kann verwendet werden, um Less in CSS zu kompilieren. Lassen Sie uns unsere primäre app.less-Datei in public/css/app.css kompilieren.
mix.less('resources/less/app.less', 'public/css');
Mehrere Aufrufe der less-Methode können zum Kompilieren mehrerer Dateien verwendet werden:
mix.less('resources/less/app.less', 'public/css')
.less('resources/less/admin.less', 'public/css');
Wenn Sie den Dateinamen des kompilierten CSS anpassen möchten, können Sie einen vollständigen Dateipfad als zweites Argument an die less-Methode übergeben:
mix.less('resources/less/app.less', 'public/stylesheets/styles.css');
Wenn Sie die zugrunde liegenden Less-Plug-in-Optionen überschreiben müssen, können Sie mix.less() ein Objekt als drittes Argument übergeben:
mix.less('resources/less/app.less', 'public/css', {
strictMath: true
});
Sass
Mit der sass-Methode können Sie Sass in CSS kompilieren. Sie können die Methode folgendermaßen anwenden:
mix.sass('resources/sass/app.scss', 'public/css');
Wie bei der less-Methode können Sie auch hier mehrere Sass-Dateien in ihre jeweiligen CSS-Dateien kompilieren und sogar das Ausgabeverzeichnis des resultierenden CSS anpassen:
mix.sass('resources/sass/app.sass', 'public/css')
.sass('resources/sass/admin.sass', 'public/css/admin');
Zusätzliche Node-Sass-Plug-In-Optionen können als drittes Argument angegeben werden:
mix.sass('resources/sass/app.sass', 'public/css', {
precision: 5
});
Stylus
Ähnlich wie bei Less und Sass können Sie mit der Stylus-Methode Stylus in CSS kompilieren:
mix.stylus('resources/stylus/app.styl', 'public/css');
Sie können auch zusätzliche Stylus-Plug-Ins installieren, z. B. Rupture. Installieren Sie zuerst das betreffende Plug-in über NPM (npm install rupture) und fordern Sie es dann in Ihrem Aufruf an, mix.stylus():
mix.stylus('resources/stylus/app.styl', 'public/css', {
use: [
require('rupture')()
]
});
PostCSS
PostCSS, ein leistungsstarkes Tool zur Transformation Ihres CSS, ist im Lieferumfang von Laravel Mix bereits enthalten. Standardmäßig verwendet Mix das beliebte Autoprefixer-Plug-In, um alle erforderlichen CSS3-Herstellerpräfixe automatisch anzuwenden. Es steht Ihnen jedoch frei, zusätzliche Plug-Ins hinzuzufügen, die für Ihre Anwendung geeignet sind. Installieren Sie zuerst das gewünschte Plug-In über NPM und verweisen Sie dann in Ihrer Datei webpack.mix.js darauf:
mix.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-css-variables')()
]
});
Plain CSS
Wenn Sie nur einige einfache CSS-Stylesheets in einer einzigen Datei zusammenfassen möchten, können Sie die styles-Methode verwenden.
mix.styles([
'public/css/vendor/normalize.css',
'public/css/vendor/videojs.css'
], 'public/css/all.css');
URL Processing
Da Laravel Mix auf Webpack aufbaut, ist es wichtig, einige Webpack-Konzepte zu verstehen. Für die CSS-Kompilierung schreibt und optimiert Webpack alle url() -Aufrufe in Ihren Stylesheets. Während dies zunächst seltsam klingen mag, ist es ein unglaublich leistungsfähiges Stück Funktionalität. Stellen Sie sich vor, wir möchten Sass kompilieren, das eine relative URL zu einem Bild enthält:
.example {
background: url('../images/example.png');
}
Absolute Pfade für eine bestimmte url() werden von der URL-Umschreibung ausgeschlossen. Beispielsweise wird die url('/ images / thing.png') oder die url('http://example.com/images/thing.png') nicht geändert.
Standardmäßig finden Laravel Mix und Webpack example.png, kopieren es in Ihren Ordner public/images und schreiben die url() in Ihrem generierten Stylesheet neu. Als solches lautet Ihr kompiliertes CSS:
.example {
background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}
So nützlich diese Funktion auch sein mag, es ist möglich, dass Ihre vorhandene Ordnerstruktur bereits so konfiguriert ist, wie Sie es möchten. In diesem Fall können Sie das Umschreiben von url() wie folgt deaktivieren:
mix.sass('resources/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
Mit diesem Zusatz zu Ihrer Datei webpack.mix.js stimmt Mix nicht mehr mit url() überein oder kopiert Assets in Ihr öffentliches Verzeichnis. Mit anderen Worten, das kompilierte CSS sieht genauso aus, wie Sie es ursprünglich eingegeben haben:
.example {
background: url("../images/thing.png");
}
Source Maps
Obwohl standardmäßig deaktiviert, können Quellzuordnungen durch Aufrufen der mix.sourceMaps() -Methode in Ihrer webpack.mix.js-Datei aktiviert werden. Dies ist zwar mit Kosten für Kompilierung / Leistung verbunden, bietet jedoch zusätzliche Debugging-Informationen für die Entwicklertools Ihres Browsers, wenn kompilierte Assets verwendet werden.
mix.js('resources/js/app.js', 'public/js')
.sourceMaps();
Style Of Source Mapping
Webpack bietet eine Vielzahl von Source Mapping Styles. Standardmäßig ist Mix 'Quellenzuordnungsstil auf eval-source-map eingestellt, was eine schnelle Wiederherstellungszeit ermöglicht. Wenn Sie den Zuordnungsstil ändern möchten, können Sie dies mit der sourceMaps-Methode tun:
let productionSourceMaps = false;
mix.js('resources/js/app.js', 'public/js')
.sourceMaps(productionSourceMaps, 'source-map');