Webpack style-loader vs css-loader

238

Eu tenho duas perguntas.

1) CSS Loader e Style Loader são dois carregadores de webpack. Eu não conseguia entender a diferença entre os dois. Por que tenho que usar dois carregadores quando eles fazem o mesmo trabalho?

2) O que são esses .useable.less e .useable.css mencionados nos arquivos Leiame.md acima?

webpack webpack-style-loader Anvesh Checka
fonte
Veja Isto é como angular-cli / Webpack entrega seus estilos CSS para o cliente para explicação detalhada
Max Koretskyi

Respostas:

283

O carregador CSS pega um arquivo CSS e retorna o CSS com importse url(...)resolvido por meio da requirefuncionalidade do webpack :

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

Na verdade, ele não faz nada com o CSS retornado.

O carregador de estilos usa CSS e, na verdade, o insere na página para que os estilos estejam ativos na página.

Eles executam operações diferentes, mas geralmente é útil encadeá-las, como tubos Unix. Por exemplo, se você estivesse usando o pré-processador Menos CSS , poderia usar

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

para

  1. Transforme-se file.lessem CSS simples com o carregador Menos
  2. Resolver todos os importse url(...)s no CSS com o carregador de CSS
  3. Inserir esses estilos na página com o carregador de estilos
Michelle Tilley
fonte
24
Você pode, por favor, dizer o que você usa ao inserir estilo na página? Porque eu estou usando ExtractTextPlugin para CSS e de acordo com o que você escreveu, eu não deveria estar usando o carregador de estilos. Além disso, o que sinto é que o uso do carregador de estilos faz com que meu estilo seja empacotado com JS até que eu usei o plug-in de extração. Nota: Estou usando o webpack. E depois de retirar esse estilo-loader, as coisas são inalterada para mim como porque eu disse acima que eu já estou tendo o meu CSS em arquivo separado criado por extrato de plug-in ..
myDoggyWritesCode
6
@ user3241111 Acho que ele quis dizer o seguinte: "Adiciona CSS ao DOM injetando uma <style>tag" (copiada da documentação oficial em github.com/webpack/style-loader )
exmaxx 10/10/16
1
Portanto, a idéia é que o webpack retire todo o CSS processado e o coloque na cabeça do documento para evitar solicitações HTTP para tags <link> e definições de estilo de URL? Presumo que esse seja o ponto. Coisas como glamour e glamour fazem isso também. Tenho certeza de que é mais rápido carregar dessa maneira. Mas eu posso estar incorreto.
Tamb
Por importseu suponho que você se referem a @importdirectivas. Por padrão, essa diretiva não mescla as regras CSS importadas ao importador, mas cria outra GETsolicitação. Você está dizendo que css-loaderretornará uma saída mesclada?
Adi518
1
e retorna a CSS - ele retorna JS, ver Isto é como angular-cli / Webpack entrega seus estilos CSS para o cliente
Max Koretskyi
55

css-loaderlê em um arquivo css como uma string. Você pode substituí-lo raw-loadere obter o mesmo efeito em muitas situações. Como ele apenas lê o conteúdo do arquivo e nada mais, é basicamente inútil, a menos que você o encadeie com outro carregador.

style-loaderpega esses estilos e cria uma <style>tag no <head>elemento da página que contém esses estilos.

Se você olhar o javascript bundle.jsdepois de usar, style-loaderverá um comentário no código gerado que diz

// style-loader: adiciona css ao DOM adicionando uma tag

Por exemplo,

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

Esse exemplo vem deste tutorial . Se você remover o style-loaderdo pipeline, alterando a linha

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

para

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

você verá que isso <style>desaparece.

d512
fonte
5
então quando devo usar css-loaderem oposição a raw-loader?
Royi Namir 6/11
4
O css-loader interpreta @import e url () como import / require () e os resolverá. O carregador bruto apenas carrega o arquivo especificado.
22618 Andrew
13

Para responder à segunda pergunta "O que são esses arquivos .useable.less e .useable.css mencionados nos arquivos Leiame.md acima?", Por padrão, quando um estilo é require'd, o módulo carregador de estilos injeta automaticamente uma <script>marca no DOM e essa tag permanece no DOM até que a janela do navegador seja fechada ou recarregada. O módulo loader de estilo também oferece a chamada "API contada por referência" que permite ao desenvolvedor adicionar estilos e removê-los mais tarde, quando não forem mais necessários. A API funciona assim:

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 convenção, as folhas de estilo carregadas usando esta API têm uma extensão ".usable.css" em vez de simplesmente ".css", como acima.

chrisarnesen
fonte
Esta resposta não é sobre a configuração do Webpack.
Andrew Koster
@AndrewKoster Eu não entendo o que você quer dizer. Esta é uma resposta para a segunda parte da pergunta de duas partes do pôster original sobre o funcionamento interno e as convenções de nomeação de arquivos do módulo carregador de estilos.
chrisarnesen 15/06
Claro, mas como você diz, há duas partes na questão. Essa resposta (e a resposta aceita) ignora completamente a primeira parte da pergunta, que é a parte mais importante e geralmente aplicável. A única resposta que aborda a questão sobre o que são esses carregadores e como configurá-los é a resposta de Brian Ogden, pela qual ninguém está votando (por algum motivo).
Andrew Koster
Não estou usando nada disso estranho exige sintaxe com os pontos de exclamação malucos, mas ainda preciso saber como configurar esses carregadores no Webpack. Meu caso de uso parece ser mais comum do que o que todos vocês estão fazendo com os loucos exige sintaxe.
Andrew Koster