Caricatore di stili Webpack vs caricatore di CSS

238

Ho due domande

1) Caricatore CSS e Caricatore di stili sono due caricatori di webpack. Non riuscivo a capire la differenza tra i due. Perché devo usare due caricatori quando entrambi fanno lo stesso lavoro?

2) Cos'è questo .useable.less e .useable.css menzionato nei file Readme.md sopra?

webpack webpack-style-loader

— Anvesh Checka
fonte

Vedere Questo è il modo angolare-cli / webpack offre agli stili CSS al cliente per la spiegazione approfondita

— Max Koretskyi

283

Il caricatore CSS prende un file CSS e restituisce il CSS con importse url(...)risolto tramite la requirefunzionalità del webpack :

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

In realtà non fa nulla con il CSS restituito.

Il caricatore di stili accetta CSS e lo inserisce effettivamente nella pagina in modo che gli stili siano attivi sulla pagina.

Eseguono diverse operazioni, ma è spesso utile metterle insieme, come le pipe Unix. Ad esempio, se si utilizzava il preprocessore Less CSS , è possibile utilizzare

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

per

Trasforma file.lessin semplice CSS con il caricatore Meno
Risolvi tutti i importse url(...)s nel CSS con il caricatore CSS
Inserisci quegli stili nella pagina con il caricatore di stili

— Michelle Tilley
fonte

24

Puoi dirmi cosa mena inserendo lo stile nella pagina? Perché sto usando ExtractTextPlugin per CSS e secondo quello che hai scritto, non dovrei usare il caricatore di stile. Inoltre, ciò che sento è che l'uso del caricatore di stile rende il mio stile impacchettato con JS fino a quando non ho usato il plugin di estrazione. Nota: sto usando il webpack. E dopo aver rimosso quel caricatore di stile, le cose sono rimaste invariate per me come perché ho appena detto sopra che ho già il mio CSS in un file separato creato dal plugin di estrazione ..

— myDoggyWritesCode

6

@ user3241111 Penso che intendesse questo: "Aggiunge CSS al DOM iniettando un <style>tag" (questo è copiato dalla documentazione ufficiale su github.com/webpack/style-loader )

— exmaxx,

1

Quindi l'idea è che il webpack rimuove tutti i CSS elaborati e li posiziona nella testa del documento in modo da evitare richieste HTTP per tag <link> e definizioni di stile url? Presumo che questo sia il punto. Cose come glamour e glamour fanno anche questo. Sono abbastanza sicuro che il caricamento sia più veloce in questo modo. Ma potrei essere errato.

— Tamb

Con importspresumo si fa riferimento a @importdirettive. Per impostazione predefinita, questa direttiva non unisce le regole CSS importate all'importatore, ma crea piuttosto un'altra GETrichiesta. Stai dicendo che css-loaderrestituirà un risultato unito?

— adi518,

1

e restituisce il CSS - restituisce JS, vedi Ecco come angular-cli / webpack consegna i tuoi stili CSS al client

— Max Koretskyi

55

css-loaderlegge in un file CSS come una stringa. Potresti sostituirlo conraw-loader e ottenere lo stesso effetto in molte situazioni. Dal momento che legge solo il contenuto del file e nient'altro, è sostanzialmente inutile a meno che non lo si incatena con un altro caricatore.

style-loaderaccetta quegli stili e crea un <style>tag nell'elemento della pagina <head>contenente quegli stili.

Se guardi il javascript all'interno bundle.jsdopo aver usato style-loadervedrai un commento nel codice generato che dice

// style-loader: aggiunge alcuni css al DOM aggiungendo un tag

Per esempio,

<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>

Questo esempio viene da questo tutorial . Se si rimuove ilstyle-loader dalla pipeline modificando la linea

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

per

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

vedrai che il <style>va via.

— D512
fonte

5

quindi quando dovrei usare css-loaderal contrario di raw-loader?

— Royi Namir,

4

Il caricatore css interpreta @import e url () come import / require () e li risolverà. Il raw-loader carica solo il file specificato.

— Andrew

13

Per rispondere alla seconda domanda "Cos'è questo .useable.less e .useable.css menzionato nei file Readme.md sopra?", Per impostazione predefinita quando uno stile è require'd , il modulo caricatore di stile inietta automaticamente un <script>tag nel DOM e tale tag rimane nel DOM fino a quando la finestra del browser non viene chiusa o ricaricata. Il modulo caricatore di stili offre anche una cosiddetta "API conteggio di riferimento" che consente allo sviluppatore di aggiungere stili e rimuoverli in seguito quando non sono più necessari. L'API funziona in questo modo:

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

Per convenzione, i fogli di stile caricati usando questa API hanno l'estensione ".usable.css" anziché semplicemente ".css" come sopra.

— chrisarnesen
fonte

Questa risposta non riguarda la configurazione di Webpack.

— Andrew Koster,

@AndrewKoster Non capisco cosa intendi. Questa è una risposta alla seconda parte della domanda in due parti del poster originale sui meccanismi interni e sulle convenzioni di denominazione dei file del modulo caricatore di stile.

— chrisarnesen,

Certo, ma come dici tu, ci sono due parti della domanda. Questa risposta (e la risposta accettata) ignorano completamente la prima parte della domanda, che è la parte più importante e generalmente applicabile. L'unica risposta che affronta la domanda su cosa siano questi caricatori e su come configurarli è la risposta di Brian Ogden per cui nessuno sta votando (per qualche ragione).

— Andrew Koster,

Non sto usando nessuna di queste strane richieste di sintassi con i punti esclamativi pazzi, ma ho ancora bisogno di sapere come configurare questi caricatori in Webpack. Il mio caso d'uso sembra più comune di qualsiasi cosa abbiate fatto con la pazza sintassi.

— Andrew Koster,

2

La documentazione di Webpack consiglia di combinare il caricatore di stili con il caricatore di CSS:

https://webpack.js.org/loaders/style-loader/

— Brian Ogden
fonte