Webpack style-loader vs css-loader

Respuestas:

283

El cargador de CSS toma un archivo CSS y devuelve el CSS con importsy url(...)resuelto a través de la requirefuncionalidad 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. Conviértase file.lessen CSS simple con el cargador Less
  2. Resolver todos los importse url(...)s en el CSS con el cargador CSS
  3. Inserte esos estilos en la página con el cargador de estilos
Michelle Tilley
fuente
24
¿Puede decirme qué hace al insertar estilo en la página? Debido a que estoy usando ExtractTextPlugin para CSS y de acuerdo con lo que escribiste, no debería usar el cargador de estilos. Además, lo que siento es que el uso del cargador de estilos hace que mi estilo se incluya con JS hasta que use el complemento de extracción. Nota: estoy usando webpack. Y después de eliminar ese cargador de estilo, las cosas no han cambiado para mí, ya que acabo de decir que ya tengo mi CSS en un archivo separado creado por el complemento de extracción ...
myDoggyWritesCode
66
@ user3241111 Creo que quiso decir esto: "Agrega CSS al DOM al inyectar una <style>etiqueta" (esto se copia de la documentación oficial en github.com/webpack/style-loader )
exmaxx
1
Entonces, ¿la idea es que webpack elimine todo el CSS procesado y lo coloque en el encabezado del documento para evitar solicitudes HTTP de etiquetas <link> y definiciones de estilo de URL? Supongo que este es el punto. Cosas como el glamour y el glamour hacen esto también. Estoy bastante seguro de que es más rápido cargar de esta manera. Pero puedo ser incorrecto.
Tamb
Por importssupongo que se refieren a @importlas directivas. Por defecto, esta directiva no combina las reglas CSS importadas en el importador, sino que crea otra GETsolicitud. ¿Estás diciendo que css-loaderdevolverá una salida combinada?
adi518
1
y devuelve el CSS - devuelve JS, vea Así es como angular-cli / webpack entrega sus estilos CSS al cliente
Max Koretskyi
55

css-loaderlee en un archivo css como una cadena. Puede reemplazarlo raw-loadery 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-loadertoma esos estilos y crea una <style>etiqueta en el <head>elemento de la página que contiene esos estilos.

Si observa el javascript dentro bundle.jsdespués de usarlo 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 quita 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 <style>desaparece.

d512
fuente
55
Entonces, ¿cuándo debo usar css-loaderen lugar de raw-loader?
Royi Namir
44
El css-loader interpreta @import y url () como import / require () y los resolverá. El cargador sin procesar solo carga el archivo especificado.
Andrew
13

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 un estilo es require'd, el módulo cargador de estilos inyecta automáticamente una <script>etiqueta en el DOM, y esa etiqueta permanece en el DOM hasta que la ventana del navegador se cierra o se vuelve 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.

chrisarnesen
fuente
Esta respuesta no se trata de la configuración de Webpack.
Andrew Koster,
@ AndrewKoster No entiendo lo que quieres decir. Esta es una respuesta a la segunda parte de la pregunta de dos partes del póster original sobre el funcionamiento interno y las convenciones de nomenclatura de archivos del módulo cargador de estilos.
chrisarnesen
Claro, pero como dices, hay dos partes en la pregunta. Esta respuesta (y la respuesta aceptada) ignora por completo la primera parte de la pregunta, que es la parte más importante y generalmente aplicable. La única respuesta que aborda la pregunta de qué son estos cargadores y cómo configurarlos, es la respuesta de Brian Ogden por la que nadie está votando (por alguna razón).
Andrew Koster
No estoy utilizando ninguno de estos extraños sintaxis con los signos de exclamación locos, pero todavía necesito saber cómo configurar estos cargadores en Webpack. Mi caso de uso parece ser más común que lo que sea que estén haciendo con la sintaxis de crazy crazy.
Andrew Koster