Webpack style-loader vs css-loader

238

Tôi có hai câu hỏi.

1) Trình tải CSS và Trình tải kiểu là hai trình tải webpack. Tôi không thể nắm bắt được sự khác biệt giữa hai. Tại sao tôi phải sử dụng hai bộ tải khi cả hai cùng làm một công việc?

2) Đây là .usitable.less và .usizable.css được đề cập trong các tệp Readme.md ở trên?

webpack  webpack-style-loader 
— Anvesh Checka
nguồn
— Max Koretskyi

Câu trả lời:

283

Trình tải CSS lấy một tệp CSS và trả về CSS importsvà url(...)được giải quyết thông qua requirechức năng của webpack :

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

Nó không thực sự làm bất cứ điều gì với CSS trả về.

Trình tải kiểu lấy CSS và thực sự chèn nó vào trang để các kiểu được kích hoạt trên trang.

Chúng thực hiện các hoạt động khác nhau, nhưng thường rất hữu ích khi xâu chuỗi chúng lại với nhau, như các ống Unix. Ví dụ: nếu bạn đang sử dụng bộ tiền xử lý Ít CSS , bạn có thể sử dụng

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

đến

  1. Biến file.lessthành CSS đơn giản với Trình tải ít hơn
  2. Giải quyết tất cả các importsvà url(...)trong CSS bằng trình tải CSS
  3. Chèn các kiểu đó vào trang với trình tải kiểu
— Michelle Tilley
nguồn
24
Bạn có thể vui lòng cho biết, bạn làm gì bằng cách chèn phong cách vào trang? Bởi vì tôi đang sử dụng ExtractTextPlugin cho CSS và theo những gì bạn đã viết, tôi không nên sử dụng trình tải kiểu. Ngoài ra, điều tôi cảm thấy là việc sử dụng trình tải kiểu làm cho Kiểu của tôi bị bó với JS cho đến khi tôi sử dụng plugin giải nén. Lưu ý: Tôi đang sử dụng webpack. Và sau khi xóa trình tải kiểu đó, mọi thứ không thay đổi đối với tôi vì tôi vừa nói ở trên rằng tôi đã có CSS ​​của mình trong tệp riêng được tạo bởi trích xuất plugin ..
— myDoggyWritesCode
6
@ user3241111 Tôi nghĩ rằng anh ấy có ý này: "Thêm CSS vào DOM bằng cách tiêm <style>thẻ" (điều này được sao chép từ tài liệu chính thức tại github.com/webpack/style-loader )
— exmaxx
1
Vì vậy, ý tưởng là gói web sẽ loại bỏ tất cả CSS đã xử lý của bạn và đặt nó vào phần đầu của tài liệu để nó tránh các yêu cầu HTTP cho các thẻ <link> và định nghĩa kiểu url? Tôi cho rằng đây là điểm. Những thứ như quyến rũ và quyến rũ cũng làm điều này. Tôi khá chắc chắn rằng nó tải nhanh hơn theo cách này. Nhưng tôi có thể không chính xác.
— Tamb
Bởi importstôi giả sử bạn tham khảo các @importchỉ thị. Theo mặc định, lệnh này không hợp nhất các quy tắc CSS đã nhập vào trình nhập, mà là tạo một GETyêu cầu khác . Bạn đang nói rằng css-loadersẽ trả lại một đầu ra hợp nhất?
— adi518
1
— Max Koretskyi
54

css-loaderđọc trong tệp css dưới dạng chuỗi. Bạn có thể thay thế nó raw-loadervà có được hiệu quả tương tự trong nhiều tình huống. Vì nó chỉ đọc nội dung tệp và không có gì khác, về cơ bản nó vô dụng trừ khi bạn xâu chuỗi nó với một trình tải khác.

style-loaderlấy các kiểu đó và tạo một <style>thẻ trong thành <head>phần của trang có chứa các kiểu đó.

Nếu bạn nhìn vào javascript bên trong bundle.jssau khi sử dụng, style-loaderbạn sẽ thấy một nhận xét trong mã được tạo có nội dung

// style-loader: Thêm một số css vào DOM bằng cách thêm thẻ

Ví dụ,

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

Ví dụ đó xuất phát từ hướng dẫn này . Nếu bạn loại bỏ style-loaderkhỏi đường ống bằng cách thay đổi dòng

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

đến

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

bạn sẽ thấy rằng <style>đi xa.

— d512
nguồn
5
Vì vậy, khi nào tôi nên sử dụng css-loadertrái ngược với raw-loader?
— Royi Namir
4
Trình tải css diễn giải @import và url () như nhập / Yêu cầu () và sẽ giải quyết chúng. Trình tải thô chỉ tải tập tin được chỉ định.
— andrew
13

Để trả lời câu hỏi thứ hai ".useable.less này là gì và .useable.css đề cập ở trên Readme.md file?", Theo mặc định khi một phong cách require'd, module phong cách-loader tự động tiêm một <script>thẻ vào DOM, và thẻ đó vẫn còn trong DOM cho đến khi cửa sổ trình duyệt được đóng hoặc tải lại. Mô-đun trình tải kiểu cũng cung cấp cái gọi là "API được tính tham chiếu" cho phép nhà phát triển thêm kiểu và loại bỏ chúng sau này khi không còn cần thiết nữa. API hoạt động như thế này:

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

Theo quy ước, các biểu định kiểu được tải bằng API này có phần mở rộng ".Us.css" thay vì chỉ đơn giản là ".css" như trên.

— chrisarnesen
nguồn
Câu trả lời này không phải là về cấu hình Webpack.
— Andrew Koster
@AndrewKoster Tôi không hiểu ý bạn. Đây là câu trả lời cho phần thứ hai của câu hỏi hai phần của người đăng ban đầu về hoạt động bên trong và quy ước đặt tên tệp của mô-đun trình tải kiểu.
— chrisarnesen
Chắc chắn, nhưng như bạn nói, có hai phần của câu hỏi. Câu trả lời này (và câu trả lời được chấp nhận) hoàn toàn bỏ qua phần đầu tiên của câu hỏi, đây là phần quan trọng hơn và thường được áp dụng. Câu trả lời duy nhất giải quyết câu hỏi về những bộ tải này là gì và cách cấu hình chúng, là câu trả lời của Brian Ogden mà không ai bỏ phiếu (vì một số lý do).
— Andrew Koster
Tôi không sử dụng bất kỳ cú pháp yêu cầu kỳ lạ nào với các dấu chấm than điên rồ này, nhưng tôi vẫn cần biết cách định cấu hình các trình tải này trong Webpack. Trường hợp sử dụng của tôi có vẻ như là một trường hợp phổ biến hơn bất cứ điều gì bạn đang làm với cú pháp yêu cầu điên rồ.
— Andrew Koster
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.