Chargeur de style Webpack vs chargeur CSS

238

J'ai deux questions.

1) CSS Loader et Style Loader sont deux chargeurs de webpack. Je ne pouvais pas saisir la différence entre les deux. Pourquoi dois-je utiliser deux chargeurs alors qu'ils font tous les deux le même travail?

2) Quels sont ces fichiers .useable.less et .useable.css mentionnés dans les fichiers Readme.md ci-dessus?

webpack webpack-style-loader Anvesh Checka
la source
Voir Voici comment angular-cli / webpack fournit vos styles CSS au client pour une explication approfondie
Max Koretskyi

Réponses:

283

Le chargeur CSS prend un fichier CSS et retourne le CSS avec importset url(...)résolu via la requirefonctionnalité de webpack :

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

Il ne fait pas faire quoi que ce soit avec le CSS retourné.

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

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

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

à

  1. Transformez-vous file.lessen CSS simple avec le chargeur Less
  2. Résoudre tous les importset url(...)s dans le CSS avec le chargeur CSS
  3. Insérez ces styles dans la page avec le chargeur de style
Michelle Tilley
la source
24
Pouvez-vous nous dire ce que vous mena en insérant du style dans la page? Parce que j'utilise ExtractTextPlugin pour CSS et selon ce que vous avez écrit, je ne devrais pas utiliser le chargeur de style. De plus, ce que je pense, c'est que l'utilisation du chargeur de style fait que mon style est intégré à JS jusqu'à ce que j'utilise un plugin d'extraction. Remarque: j'utilise webpack. Et après avoir supprimé ce chargeur de style, les choses sont inchangées pour moi car je viens de dire ci-dessus que j'ai déjà mon CSS dans un fichier séparé créé par le plugin d'extraction ..
myDoggyWritesCode
6
@ user3241111 Je pense qu'il voulait dire ceci: "Ajoute CSS au DOM en injectant une <style>balise" (ceci est copié de la documentation officielle sur github.com/webpack/style-loader )
exmaxx
1
L'idée est donc que webpack supprime tous vos CSS traités et les place dans la tête du document afin d'éviter les requêtes HTTP pour les balises <link> et les définitions de style d'URL? Je suppose que c'est le point. Des choses comme le glamour et le glamour le font aussi. Je suis sûr que le chargement est plus rapide de cette façon. Mais je me trompe peut-être.
Tamb
Par importsJe suppose que vous faites référence à des @importdirectives. Par défaut, cette directive ne fusionne pas les règles CSS importées dans l'importateur, mais crée plutôt une autre GETdemande. Voulez-vous dire que css-loadercela renverra une sortie fusionnée?
adi518
1
et renvoie le CSS - il retourne JS, voir Voici comment angular-cli / webpack livre vos styles CSS au client
Max Koretskyi
55

css-loaderlit dans un fichier css une chaîne. Vous pouvez le remplacer par raw-loaderet obtenir le même effet dans de nombreuses situations. Puisqu'il lit simplement le contenu du fichier et rien d'autre, il est fondamentalement inutile à moins que vous ne le chaîniez avec un autre chargeur.

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

Si vous regardez le javascript à l'intérieur bundle.jsaprès utilisation, style-loadervous verrez un commentaire dans le code généré qui dit

// style-loader: ajoute du 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 provient de ce tutoriel . Si vous supprimez le style-loaderdu pipeline en modifiant la ligne

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

à

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

vous verrez que <style>ça s'en va.

d512
la source
5
alors quand dois-je utiliser css-loaderpar opposition à raw-loader?
Royi Namir
4
Le css-loader interprète @import et url () comme import / require () et les résoudra. Le chargeur brut ne charge que le fichier spécifié.
andrew
13

Pour répondre à la deuxième question "Qu'est-ce que ce .useable.less et .useable.css mentionné dans les fichiers Readme.md ci-dessus?", Par défaut lorsqu'un style est require'd, le module de style-loader 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 de chargement de style propose également une soi-disant «API comptée par référence» qui permet au développeur d'ajouter des styles et de les supprimer plus tard 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 une extension ".usable.css" plutôt que simplement ".css" comme ci-dessus.

chrisarnesen
la source
Cette réponse ne concerne pas la configuration de Webpack.
Andrew Koster
@AndrewKoster Je ne comprends pas ce que tu veux dire. Il s'agit d'une réponse à la deuxième partie de la question en deux parties de l'affiche originale sur le fonctionnement interne et les conventions de dénomination des fichiers du module de chargeur de style.
chrisarnesen
Bien sûr, mais comme vous le dites, la question comporte deux parties. Cette réponse (et la réponse acceptée) ignore complètement la première partie de la question, qui est la partie la plus importante et généralement applicable. La seule réponse qui répond à la question de savoir quels sont ces chargeurs et comment les configurer, est la réponse de Brian Ogden pour laquelle personne ne vote (pour une raison quelconque).
Andrew Koster
Je n'utilise aucune de ces syntaxes d'exigences étranges avec les points d'exclamation fous, mais j'ai encore besoin de savoir comment configurer ces chargeurs dans Webpack. Mon cas d'utilisation semble être plus courant que tout ce que vous faites tous avec la folle syntaxe require.
Andrew Koster