Webpack Style-Loader gegen CSS-Loader

238

Ich habe zwei Fragen.

1) CSS Loader und Style Loader sind zwei Webpack-Loader. Ich konnte den Unterschied zwischen den beiden nicht erfassen. Warum muss ich zwei Lader verwenden, wenn beide den gleichen Job machen?

2) Was ist diese .useable.less und .useable.css, die in den obigen Readme.md-Dateien erwähnt werden?

webpack webpack-style-loader Anvesh Checka
quelle
Siehe So liefert Angular-Cli / Webpack Ihre CSS-Stile an den Client, um eine ausführliche Erklärung zu erhalten
Max Koretskyi,

Antworten:

283

Der CSS-Loader nimmt eine CSS-Datei und gibt das CSS mit den folgenden Funktionen zurück importsund wird url(...)über die Webpack- requireFunktionalität aufgelöst:

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

Es ist nicht wirklich tut nichts mit dem zurückgegebenen CSS.

Der Style Loader verwendet CSS und fügt es tatsächlich in die Seite ein, sodass die Styles auf der Seite aktiv sind.

Sie führen verschiedene Vorgänge aus, aber es ist oft nützlich, sie wie Unix-Pipes miteinander zu verketten. Wenn Sie beispielsweise den Präprozessor Less CSS verwenden , können Sie ihn verwenden

require("style!css!less!./file.less")

zu

  1. Verwandeln Sie file.lesssich mit dem Less-Loader in einfaches CSS
  2. Lösen Sie alle importsund url(...)s im CSS mit dem CSS-Loader auf
  3. Fügen Sie diese Stile mit dem Style Loader in die Seite ein
Michelle Tilley
quelle
24
Können Sie bitte sagen, was Sie mena, indem Sie Stil in die Seite einfügen? Da ich ExtractTextPlugin für CSS verwende und gemäß dem, was Sie geschrieben haben, sollte ich keinen Style Loader verwenden. Ich habe auch das Gefühl, dass durch die Verwendung von Style Loader mein Style mit JS gebündelt wird, bis ich das Extract Plugin verwendet habe. Hinweis: Ich verwende Webpack. Und nachdem ich diesen Style-Loader entfernt habe, bleiben die Dinge für mich unverändert, da ich gerade oben gesagt habe, dass ich mein CSS bereits in einer separaten Datei habe, die vom Extrakt-Plugin erstellt wurde.
myDoggyWritesCode
6
@ user3241111 Ich denke, er meinte dies: "Fügt dem DOM CSS hinzu, indem ein <style>Tag
eingefügt wird
1
Die Idee ist also, dass das Webpack Ihr gesamtes verarbeitetes CSS entfernt und es im Kopf des Dokuments platziert, um HTTP-Anforderungen für <link> -Tags und Definitionen des URL-Stils zu vermeiden. Ich nehme an, das ist der Punkt. Dinge wie Glamour und Glamour tun dies auch. Ich bin mir ziemlich sicher, dass es auf diese Weise schneller geladen wird. Aber ich kann falsch sein.
Tamb
Durch importsIch gehe davon verweisen auf @importRichtlinien. Standardmäßig führt diese Direktive die importierten CSS-Regeln nicht in den Importer ein, sondern erstellt eine weitere GETAnforderung. css-loaderWollen Sie damit sagen, dass eine zusammengeführte Ausgabe zurückgegeben wird?
adi518
1
und gibt das CSS zurück - es gibt JS zurück, siehe So liefert Angular-Cli / Webpack Ihre CSS-Stile an den Client
Max Koretskyi
54

css-loaderliest eine CSS-Datei als Zeichenfolge ein. Sie können es durch ersetzen raw-loaderund in vielen Situationen den gleichen Effekt erzielen. Da es nur den Dateiinhalt und nichts anderes liest, ist es im Grunde genommen nutzlos, es sei denn, Sie verketten es mit einem anderen Loader.

style-loaderNimmt diese Stile und erstellt ein <style>Tag im <head>Element der Seite, das diese Stile enthält.

Wenn Sie sich bundle.jsnach der Verwendung das darin enthaltene Javascript style-loaderansehen, wird im generierten Code ein Kommentar angezeigt, der besagt

// style-loader: Fügt dem DOM durch Hinzufügen eines Tags CSS hinzu

Beispielsweise,

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

Dieses Beispiel stammt aus diesem Tutorial . Wenn Sie das style-loaderaus der Pipeline entfernen, indem Sie die Leitung ändern

require("!style-loader!css-loader!./style.css");

zu

require("css-loader!./style.css");

Sie werden sehen, dass das <style>weggeht.

d512
quelle
5
Also, wann sollte ich css-loaderim Gegensatz zu verwenden raw-loader?
Royi Namir
4
Der CSS-Loader interpretiert @import und url () wie import / require () und löst sie auf. Der Raw-Loader lädt nur die angegebene Datei.
Andrew
13

Um die zweite Frage zu beantworten: "Was ist diese .useable.less und .useable.css, die in den obigen Readme.md-Dateien erwähnt wird?", Fügt require'ddas style-loader-Modul standardmäßig, wenn ein Stil vorliegt, automatisch ein <script>Tag in das DOM ein und Dieses Tag bleibt im DOM, bis das Browserfenster geschlossen oder neu geladen wird. Das Style-Loader-Modul bietet außerdem eine sogenannte "Referenz-API", mit der der Entwickler Styles hinzufügen und später entfernen kann, wenn sie nicht mehr benötigt werden. Die API funktioniert folgendermaßen:

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

Standardmäßig haben mit dieser API geladene Stylesheets die Erweiterung ".usable.css" und nicht einfach ".css" wie oben.

chrisarnesen
quelle
Bei dieser Antwort geht es nicht um die Webpack-Konfiguration.
Andrew Koster
@ AndrewKoster Ich verstehe nicht, was du meinst. Dies ist eine Antwort auf den zweiten Teil der zweiteiligen Frage des Originalplakats über das Innenleben und die Dateinamenskonventionen des Style-Loader-Moduls.
Chrisarnesen
Sicher, aber wie Sie sagen, besteht die Frage aus zwei Teilen. Diese Antwort (und die akzeptierte Antwort) ignorieren den ersten Teil der Frage, der der wichtigere und allgemein anwendbare Teil ist, vollständig. Die einzige Antwort, die sich mit der Frage befasst, was diese Lader sind und wie sie konfiguriert werden, ist die Antwort von Brian Ogden, für die (aus irgendeinem Grund) niemand stimmt.
Andrew Koster
Ich verwende keine dieser seltsamen Anforderungssyntaxen mit den verrückten Ausrufezeichen, aber ich muss noch wissen, wie diese Loader in Webpack konfiguriert werden. Mein Anwendungsfall scheint häufiger zu sein als alles, was Sie alle mit der verrückten Syntax tun.
Andrew Koster