Webpack style-loader vs css-loader

Ho due domande.

1) Caricatore e caricatore di stili CSS sono due caricatori di pacchetti Web. Non riuscivo a cogliere la differenza tra i due. Perché devo utilizzare due caricatori quando fanno entrambi lo stesso lavoro?

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

Il caricatore CSS accetta un file CSS e restituisce il CSS con imports e url(...) risolti tramite la funzionalità di require 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 prende CSS e in realtà lo inserisce nella pagina in modo che gli stili siano attivi sulla pagina.

Eseguono diverse operazioni, ma spesso è utile ricollegarle, come i pipe Unix. Ad esempio, se si stesse utilizzando il preprocessore Less CSS , è ansible utilizzare

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

a

  1. Trasforma file.less in semplice CSS con il caricatore Less
  2. Risolvi tutte le imports e l’ url(...) s nel CSS con il caricatore CSS
  3. Inserisci questi stili nella pagina con il caricatore di stili

css-loader legge in un file css come una stringa. Potresti sostituirlo con raw-loader e ottenere lo stesso effetto in molte situazioni. Dal momento che legge solo il contenuto del file e nient’altro, è praticamente inutile a meno che non lo si incastri con un altro loader.

style-loader prende quegli stili e crea un tag

nell'elemento della pagina che contiene quegli stili.

Se guardi il javascript all'interno di bundle.js dopo aver usato style-loader vedrai un commento nel codice generato che dice

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

Per esempio,

          

Questo esempio viene da questo tutorial . Se rimuovi il style-loader dalla pipeline modificando la linea

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

a

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

vedrai che lo

va via.

Per rispondere alla seconda domanda “Cos’è questo .useable.less e .useable.css menzionato nei file Readme.md precedenti?”, Per impostazione predefinita quando uno stile è require'd , il modulo caricatore stile inietta automaticamente uno tag nel DOM, e quel tag rimane nel DOM fino a quando la finestra del browser non viene chiusa o ricaricata. Il modulo caricatore di stile offre anche una cosiddetta "API conteggio di riferimento" che consente allo sviluppatore di aggiungere stili e rimuoverli più tardi 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  

Per convenzione, i fogli di stile caricati usando questa API hanno un'estensione ".usable.css" piuttosto che semplicemente ".css" come sopra.