Cargador de estilo de paquete web vs cargador de css
Tengo dos preguntas.
1) CSS Loader y Style Loader son dos cargadores de paquetes web. No pude entender la diferencia entre los dos. ¿Por qué tengo que utilizar dos cargadores cuando ambos hacen el mismo trabajo?
2) ¿Qué es este .useable.less y .useable.css mencionado en los archivos Readme.md anteriores?
El cargador de CSS toma un archivo CSS y lo devuelve importsy url(...)lo resuelve a través de la funcionalidad del paquete web require:
var css = require("css!./file.css"); // => returns css code from file.css, resolves imports and url(...)
En realidad, no hace nada con el CSS devuelto.
El cargador de estilos toma CSS y lo inserta en la página para que los estilos estén activos en la página.
Realizan diferentes operaciones, pero a menudo es útil encadenarlos, como las tuberías de Unix. Por ejemplo, si estuviera usando el preprocesador Less CSS , podría usar
require("style!css!less!./file.less")
a
- Conviértase
file.lessen CSS simple con el cargador Less - Resuelva todos los
importsyurl(...)s en el CSS con el cargador de CSS - Inserte esos estilos en la página con el cargador de estilos.
css-loaderlee un archivo css como una cadena. Podrías reemplazarlo raw-loadery obtener el mismo efecto en muchas situaciones. Dado que solo lee el contenido del archivo y nada más, es básicamente inútil a menos que lo encadene con otro cargador.
style-loadertoma esos estilos y crea una <style>etiqueta en el <head>elemento de la página que contiene esos estilos.
Si miras el javascript dentro bundle.jsdespués de usarlo, style-loaderverás un comentario en el código generado que dice
// cargador de estilos: agrega algo de CSS al DOM agregando una etiqueta
Por ejemplo,
<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>
Ese ejemplo proviene de este tutorial . Si retira el style-loaderde la tubería cambiando la línea
require("!style-loader!css-loader!./style.css");
a
require("css-loader!./style.css");
verás que se <style>va.
Para responder a la segunda pregunta "¿Qué es este .useable.less y .useable.css mencionado en los archivos Readme.md anteriores?", de forma predeterminada, cuando un estilo es require'd, el módulo del cargador de estilos inyecta automáticamente una <script>etiqueta en el DOM y esa etiqueta permanece en el DOM hasta que se cierra o se vuelve a cargar la ventana del navegador. El módulo de carga de estilos también ofrece la llamada "API con recuento de referencias" que permite al desarrollador agregar estilos y eliminarlos más tarde cuando ya no sean necesarios. La API funciona así:
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
Por convención, las hojas de estilo cargadas mediante esta API tienen una extensión ".usable.css" en lugar de simplemente ".css" como se indica arriba.
