web-dev-qa-db-fra.com

Webpack style-loader vs css-loader

J'ai deux questions.

1) CSS Loader et Style Loader sont deux chargeurs de packs Web. Je ne pouvais pas comprendre la différence entre les deux. Pourquoi dois-je utiliser deux chargeurs quand ils font le même travail?

2) Qu'est-ce que ces fichiers .useable.less et .useable.css sont mentionnés dans les fichiers Readme.md ci-dessus?

webpackwebpack-style-loader
208
Anvesh Checka

Le chargeur CSS prend un fichier CSS et renvoie le CSS avec imports et url(...) résolus via la fonctionnalité require de webpack:

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

En fait , il ne fait rien avec le code CSS renvoyé.

Le chargeur de style prend CSS et l'insère dans la page pour que les styles soient actifs sur la page.

Ils effectuent différentes opérations, mais il est souvent utile de les chaîner, comme des pipes Unix. Par exemple, si vous utilisiez le préprocesseur Less CSS , vous pourriez utiliser

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

à

  1. Transformez file.less en CSS simple avec le chargeur Less
  2. Résolvez toutes les imports et url(...)s dans le CSS avec le chargeur CSS
  3. Insérer ces styles dans la page avec le chargeur de style
258
Michelle Tilley

css-loader lit dans un fichier css une chaîne. Vous pouvez le remplacer par raw-loader et obtenir le même effet dans de nombreuses situations. Comme il ne lit que le contenu du fichier et rien d’autre, il est pratiquement inutile si vous l’enchaînez avec un autre chargeur.

style-loader prend ces styles et crée une balise <style> dans l'élément <head> de la page contenant ces styles.

Si vous regardez le code javascript dans bundle.js après avoir utilisé style-loader, vous verrez un commentaire dans le code généré qui dit

// style-loader: ajoute des css au DOM en ajoutant une balise

Par exemple,

<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>

Cet exemple vient de ce tutoriel . Si vous supprimez le style-loader du pipeline en modifiant la ligne

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

à

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

vous verrez que le <style> s'en va.

47
d512

Pour répondre à la deuxième question "Qu'est-ce que ces fichiers .useable.less et .useable.css sont mentionnés dans les fichiers Readme.md ci-dessus?", Par défaut lorsqu'un style est require'd, le module chargeur de style injecte automatiquement un <script> balise dans le DOM et cette balise reste dans le DOM jusqu'à ce que la fenêtre du navigateur soit fermée ou rechargée. Le module chargeur de style offre également une "API à comptage de références" qui permet au développeur d'ajouter des styles et de les supprimer ultérieurement lorsqu'ils ne sont plus nécessaires. L'API fonctionne comme ceci:

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

Par convention, les feuilles de style chargées à l'aide de cette API ont l'extension ".usable.css" plutôt que simplement ".css" comme ci-dessus.

14
chrisarnesen