Estilo Webpack-loader vs css-loader

Tengo dos preguntas.

1) CSS Loader y Style Loader son dos cargadores webpack. No podía entender la diferencia entre los dos. ¿Por qué tengo que usar dos cargadores cuando ambos hacen el mismo trabajo?

2) Qué es esto .utilizable.menos y .utilizable.css mencionado en lo anterior Readme.md ¿archivos?

Author: thorn, 2015-12-02
Source

3 answers

El cargador CSS toma un archivo CSS y devuelve el CSS con imports y url(...) resuelto a través de la funcionalidad require de webpack: 

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 realmente 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 encadenarlas, como las tuberías Unix. Por ejemplo, si estaba utilizando el menos CSS preprocesador , se podría utilizar

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

A

  1. Convierte {[5] } en CSS simple con el cargador Less
  2. Resuelve todos los imports y url(...) s en el CSS con el cargador CSS
  3. Inserte esos estilos en la página con el cargador de estilos
 217
Author: Michelle Tilley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-12 07:39:16

css-loader lee en un archivo css como una cadena. Podría reemplazarlo con raw-loader y 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-loader toma esos estilos y crea una etiqueta <style> en el elemento <head> de la página que contiene esos estilos.

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

/ / style-loader: Añade css al DOM añadiendo 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 viene de este tutorial. Si elimina el style-loader de la canalización cambiando la línea

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

A

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

Verás que el <style> desaparece.

 30
Author: d512,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-18 06:45:57

Para responder a la segunda pregunta "Qué es esto .utilizable.menos y .utilizable.css mencionado en lo anterior Readme.md ¿archivos?", por defecto cuando un estilo es require'd, el módulo style-loader inyecta automáticamente una etiqueta <script> 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 style-loader también ofrece una llamada "API reference-counted" que permite al desarrollador agregar estilos y eliminarlos más tarde cuando ya no son necesarios. La API funciona como esto: 

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 ".utilizable.css" en lugar de ".css " como arriba.

 9
Author: chrisarnesen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-12 18:22:12