style maquillaje webpack webpack-style-loader

webpack - style loader maquillaje



Webpack style-loader vs css-loader (3)

El cargador de CSS toma un archivo CSS y devuelve el CSS con las imports y la url(...) resueltas a través de la funcionalidad require del paquete web:

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 en realidad 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 Unix. Por ejemplo, si estaba usando el preprocesador Less CSS , podría usar

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

a

  1. Convierta file.less en CSS simple con el cargador Less
  2. Resuelva todas las imports y url(...) s en el CSS con el cargador CSS
  3. Inserte esos estilos en la página con el cargador de estilos

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 usar dos cargadores cuando ambos hacen el mismo trabajo?

2) ¿Qué es este .useable.less y .useable.css mencionado en los archivos Readme.md anteriores?

Para responder a la segunda pregunta "¿Qué es esto .useable.less y .useable.css mencionado en los archivos Readme.md anteriores?", De forma predeterminada cuando se require''d un estilo, el módulo cargador de estilos inyecta automáticamente un <script> etiqueta en el DOM, y esa etiqueta permanece en el DOM hasta que la ventana del navegador se cierre o se vuelva a cargar. El módulo cargador de estilos también ofrece una llamada "API contada por referencia" que permite al desarrollador agregar estilos y eliminarlos más tarde cuando ya no los necesite. 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 usando esta API tienen una extensión ".usable.css" en lugar de simplemente ".css" como se indicó anteriormente.

css-loader lee en un archivo css como una cadena. Puede reemplazarlo con raw-loader y obtener el mismo efecto en muchas situaciones. Como solo lee el contenido del archivo y nada más, es básicamente inútil a menos que lo encadene con otro cargador.

style-loader toma esos estilos y crea una etiqueta <style> en el elemento <head> la página que contiene esos estilos.

Si observa el javascript dentro de bundle.js después de usar style-loader , verá un comentario en el código generado que dice

// style-loader: agrega algunos 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 elimina el style-loader de style-loader de la tubería cambiando la línea

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

a

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

verá que el <style> desaparece.