Webpack style-loader vs css-loader

238

Mam dwa pytania.

1) CSS Loader i Style Loader to dwa moduły ładujące webpack. Nie mogłem zrozumieć różnicy między nimi. Dlaczego muszę używać dwóch ładowarek, gdy oba wykonują tę samą pracę?

2) Co to jest .useable.less i .useable.css wspomniane w powyższych plikach Readme.md?

webpack webpack-style-loader

— Anvesh Checka
źródło

Zobacz Oto, w jaki sposób angular-cli / webpack dostarcza klientowi twoje style CSS w celu dogłębnego wyjaśnienia

— Max Koretskyi

283

Ładowarka CSS zajmuje plik CSS i zwraca z CSS importsi url(...)rozwiązane poprzez WebPACK w requirefunkcjonalności:

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

W rzeczywistości nic nie robi ze zwróconym CSS.

Moduł ładujący style pobiera CSS i faktycznie wstawia go na stronę, aby style były aktywne na stronie.

Wykonują różne operacje, ale często przydaje się ich połączenie, np. Potoki Unix. Na przykład, jeśli korzystasz z preprocesora Less CSS , możesz go użyć

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

do

Zamień się file.lessw zwykły CSS za pomocą modułu ładującego Less
Rozwiązać wszystkich importsi url(...)S w CSS z ładowaczem CSS
Wstaw te style do strony za pomocą modułu ładującego style

— Michelle Tilley
źródło

24

Czy możesz powiedzieć, co robisz, wstawiając styl na stronę? Ponieważ używam ExtractTextPlugin dla CSS i zgodnie z tym, co napisałeś, nie powinienem używać modułu ładującego style. Czuję też, że użycie modułu ładującego style powoduje, że mój styl jest dołączany do JS, dopóki nie użyję wtyczki do ekstrakcji. Uwaga: używam webpacka. Po usunięciu modułu ładującego style dla mnie nic się nie zmieniło, ponieważ właśnie powiedziałem powyżej, że mam już swój CSS w osobnym pliku utworzonym przez wypakowanie wtyczki ..

— myDoggyWritesCode

6

@ user3241111 Myślę, że miał na myśli to: „Dodaje CSS do DOM poprzez wstrzyknięcie <style>tagu” (jest to kopiowane z oficjalnej dokumentacji na github.com/webpack/style-loader )

— exmaxx 10.10.16

1

Pomysł polega na tym, że webpack usuwa wszystkie przetworzone pliki CSS i umieszcza je w nagłówku dokumentu, aby uniknąć żądań HTTP dotyczących tagów <link> i definicji stylów adresów URL? Zakładam, że o to chodzi. Takie rzeczy jak glamour i glamour również to robią. Jestem prawie pewien, że w ten sposób ładuje się szybciej. Ale mogę się mylić.

— Tamb

Przez importsZakładam, że odnoszą się do @importdyrektyw. Domyślnie ta dyrektywa nie łączy importowanych reguł CSS z importerem, ale tworzy kolejne GETżądanie. Czy mówisz, że css-loaderzwróci połączone wyjście?

— adi518

1

i zwraca CSS - zwraca JS, zobacz W ten sposób angular-cli / webpack dostarcza klientowi twój styl CSS

— Max Koretskyi

55

css-loaderwczytuje plik css jako ciąg znaków. Możesz go zastąpić raw-loaderi uzyskać ten sam efekt w wielu sytuacjach. Ponieważ po prostu czyta zawartość pliku i nic więcej, jest w zasadzie bezużyteczny, chyba że połączysz go z innym programem ładującym.

style-loaderpobiera te style i tworzy <style>znacznik w <head>elemencie strony zawierającym te style.

Jeśli spojrzysz na javascript bundle.jspo użyciu style-loader, zobaczysz komentarz w wygenerowanym kodzie, który mówi

// style-loader: Dodaje trochę css do DOM poprzez dodanie znacznika

Na przykład,

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

Ten przykład pochodzi z tego samouczka . Jeśli usuniesz style-loaderz potoku, zmieniając linię

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

do

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

zobaczysz, że <style>odchodzi.

— d512
źródło

5

więc kiedy powinienem używać css-loaderw przeciwieństwie do raw-loader?

— Royi Namir

4

Program ładujący css interpretuje @import i url () jak import / need () i je rozwiąże. Moduł ładujący raw ładuje tylko określony plik.

— andrew

13

Aby odpowiedzieć na drugie pytanie „Co to jest. Useable.less i .useable.css wspomniane w powyższych plikach Readme.md?”, Domyślnie, gdy istnieje styl require'd, moduł ładujący style automatycznie wstrzykuje <script>znacznik do DOM i ten znacznik pozostaje w DOM, dopóki okno przeglądarki nie zostanie zamknięte lub ponownie załadowane. Moduł modułu ładującego style oferuje również tak zwane „API zliczające referencje”, które pozwala programistom dodawać style i usuwać je później, gdy nie są już potrzebne. Interfejs API działa w następujący sposób:

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

Zgodnie z konwencją arkusze stylów ładowane przy użyciu tego interfejsu API mają rozszerzenie „.usable.css” zamiast po prostu „.css” jak wyżej.

— chrisarnesen
źródło

Ta odpowiedź nie dotyczy konfiguracji pakietu WebPack.

— Andrew Koster

@AndrewKoster Nie rozumiem, co masz na myśli. Jest to odpowiedź na drugą część dwuczęściowego pytania oryginalnego plakatu na temat wewnętrznego działania i konwencji nazewnictwa plików modułu modułu ładującego style.

— chrisarnesen

Jasne, ale jak mówisz, pytanie składa się z dwóch części. Ta odpowiedź (i odpowiedź zaakceptowana) całkowicie ignoruje pierwszą część pytania, która jest ważniejszą i ogólnie obowiązującą częścią. Jedyną odpowiedzią na pytanie, czym są te moduły ładujące i jak je skonfigurować, jest odpowiedź Briana Ogdena, na którą nikt nie głosuje (z jakiegoś powodu).

— Andrew Koster,

Nie używam żadnej z tych dziwnych wymaga składni z szalonymi wykrzyknikami, ale wciąż muszę wiedzieć, jak skonfigurować te moduły ładujące w Webpack. Mój przypadek użycia wydaje się być bardziej powszechny niż cokolwiek, co wszyscy robicie ze zwariowanym wymaga składni.

— Andrew Koster,

2

Dokumentacja pakietu Webpack zaleca połączenie programu ładującego styl z programem ładującym css:

https://webpack.js.org/loaders/style-loader/

— Brian Ogden
źródło