Webpack Style-Loader vs CSS-Loader

238

İki sorum var.

1) CSS Yükleyici ve Stil Yükleyici iki web paketi yükleyicisidir. İkisi arasındaki farkı kavrayamadım. Her ikisi de aynı işi yaparken neden iki yükleyici kullanmam gerekiyor?

2) Yukarıdaki Readme.md dosyalarında belirtilen bu .useable.less ve .useable.css dosyası nedir?

webpack webpack-style-loader

— Anvesh Checka
kaynak

Bkz. Açısal-cli / webpack, CSS stillerini derinlemesine açıklama için istemciye nasıl sunar

— Max Koretskyi

283

CSS yükleyici bir CSS dosyası alır ve CSS'yi web paketinin işlevselliğiyle döndürür importsve url(...)çözer require:

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

Aslında değil do döndü CSS ile bir şey.

Stil yükleyici CSS'yi alır ve stillerin sayfada etkin olması için aslında sayfaya ekler.

Farklı işlemler yaparlar, ancak Unix boruları gibi bunları zincirlemek genellikle yararlıdır. Örneğin , Daha Az CSS ön işlemcisini kullanıyorsanız,

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

için

file.lessDaha az yükleyici ile düz CSS'ye dönüş
Tüm Çöz importsve url(...)CSS yükleyici ile CSS'deki s
Bu stilleri stil yükleyici ile sayfaya ekleyin

— Michelle Tilley
kaynak

24

Lütfen, sayfaya stil ekleyerek neyi söylersiniz? CSS için ExtractTextPlugin kullandığım ve yazdıklarınıza göre, stil yükleyici kullanmamalıyım. Ayrıca, hissettiğim, stil yükleyiciyi kullanmanın, Extract eklentisini kullanana kadar Style'ımın JS ile paketlenmesini sağlamasıdır. Not: Webpack kullanıyorum. Ve bu stil yükleyiciyi kaldırdıktan sonra, işler benim için değişmedi, çünkü yukarıda sadece

— CSS'imi

6

@ user3241111 Bence bunu kastetti: "Bir <style>etiket enjekte ederek DOM'a CSS ekler " (bu, github.com/webpack/style-loader adresindeki resmi belgelerden kopyalanır )

— exmaxx

1

Fikir şu ki, webpack tüm işlenmiş CSS'nizi çıkarır ve belgenin başına yerleştirir, böylece <link> etiketleri ve url stil tanımları için HTTP isteklerini önler? Mesele bu. Büyüleyici ve çekici gibi şeyler de bunu yapar. Eminim bu şekilde daha hızlı yükleniyor. Ama yanılmış olabilirim.

— Tamb

By importsBen varsayalım başvurmak @importdirektifleri. Varsayılan olarak bu yönerge, içe aktarılan CSS kurallarını ithalatçı ile birleştirmez, aksine başka bir GETistek oluşturur. css-loaderBunun birleştirilmiş bir çıktı döndüreceğini mi söylüyorsunuz ?

— adi518

1

ve CSS döndürür - JS döndürür, bkz. açısal cli / webpack CSS stillerini istemciye bu şekilde sağlar

— Max Koretskyi

55

css-loaderbir css dosyasında dize olarak okur. Bunu raw-loaderbirçok durumda değiştirebilir ve aynı etkiyi elde edebilirsiniz. Sadece dosya içeriğini okuduğundan ve başka bir şey olmadığından, başka bir yükleyici ile zincirlemediğiniz sürece temelde işe yaramaz.

style-loaderbu stilleri alır ve <style>sayfanın <head>öğesinde bu stilleri içeren bir etiket oluşturur .

Kullandıktan bundle.jssonra içerideki javascript'e bakarsanız style-loader, oluşturulan kodda şöyle bir yorum görürsünüz:

// style-loader: Etiket ekleyerek DOM'ye biraz css ekler

Örneğin,

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

Bu örnek bu öğreticiden geliyor . style-loaderHattı değiştirerek boru hattından çıkarırsanız

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

için

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

gideceğini göreceksin <style>.

— D512
kaynak

5

peki css-loaderbunun yerine ne zaman kullanmalıyım raw-loader?

— Royi Namir

4

Css-loader @import ve url () 'i import / requir () gibi yorumlar ve çözer. Ham yükleyici yalnızca belirtilen dosyayı yükler.

— andrew

13

İkinci soruya, yukarıdaki Readme.md dosyalarında bu .useable.less ve .useable.css nedir? "Sorusunu yanıtlamak için require'd, stil olduğunda varsayılan olarak stil yükleyici modülü <script>DOM'ye otomatik olarak bir etiket enjekte eder ve bu etiket tarayıcı penceresi kapatılana veya yeniden yüklenene kadar DOM'da kalır. Stil yükleyici modülü ayrıca geliştiriciye stil eklemesine ve daha sonra artık ihtiyaç duyulmadığında bunları kaldırmasına olanak tanıyan "referans sayımlı API" da sunar. API şu şekilde çalışır:

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

Kural olarak, bu API kullanılarak yüklenen stil sayfalarının yukarıdaki gibi basitçe ".css" yerine ".usable.css" uzantısı vardır.

— chrisarnesen
kaynak

Bu yanıt Webpack yapılandırmasıyla ilgili değildir.

— Andrew Koster

@AndrewKoster Ne demek istediğini anlamıyorum. Bu, orijinal posterin stil yükleyici modülünün iç işleri ve dosya adlandırma kuralları hakkındaki iki bölümlü sorunun ikinci kısmına bir cevaptır.

— chrisarnesen

Elbette, ama dediğin gibi, sorunun iki kısmı var. Bu cevap (ve kabul edilen cevap), sorunun daha önemli ve genel olarak uygulanabilir kısmı olan ilk kısmını tamamen görmezden gelir. Bu yükleyicilerin ne olduğu ve nasıl yapılandırılacağı sorusunu ele alan tek cevap, Brian Ogden'in kimsenin oy kullanmadığı cevabıdır (bazı nedenlerden dolayı).

— Andrew Koster

Bu garip herhangi birini çılgın ünlem işaretleri ile sözdizimi gerektirmeyen kullanmıyorum, ama yine de bu yükleyicileri Webpack'te nasıl yapılandıracağımı bilmem gerekiyor. Kullanım durumum, çılgın gerektiren sözdizimi ile yaptığınız her şeyden daha yaygın bir durum gibi görünüyor.

— Andrew Koster

2

Webpack belgeleri, stil yükleyiciyi css yükleyiciyle birleştirmenizi önerir:

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

— Brian Ogden
kaynak