ฉันมีสองคำถาม
1) CSS LoaderและStyle Loaderเป็นสอง webpack loader ฉันไม่เข้าใจความแตกต่างระหว่างสองคนนี้ ทำไมฉันถึงต้องใช้สองโฮเมื่อพวกเขาทั้งสองทำงานเดียวกัน?
2) .useable.less และ .useable.css นี้ที่กล่าวถึงในไฟล์ Readme.md ข้างต้นคืออะไร
คำตอบ:
ตัวโหลด CSS ใช้ไฟล์ CSS และส่งคืน CSS พร้อมimportsและurl(...)แก้ไขผ่านการrequireทำงานของ webpack :
var css = require("css!./file.css"); // => returns css code from file.css, resolves imports and url(...)
จริงๆแล้วมันไม่ได้ทำอะไรกับ CSS ที่ส่งคืน
ตัวโหลดสไตล์ใช้ CSS และแทรกลงในเพจเพื่อให้สไตล์นั้นแอ็คทีฟบนหน้า
พวกเขาทำการดำเนินการที่แตกต่างกัน แต่มักจะมีประโยชน์ในการโยงเข้าด้วยกันเช่นท่อ Unix ตัวอย่างเช่นหากคุณใช้ตัวประมวลผลล่วงหน้า CSS น้อยคุณสามารถใช้
require("style!css!less!./file.less")ถึง
file.lessเป็น CSS ธรรมดาด้วยตัวโหลดน้อยimportsและurl(...)s ใน CSS ด้วย CSS โหลดเดอร์<style>แท็ก" (นี่จะถูกคัดลอกมาจากเอกสารอย่างเป็นทางการที่github.com/webpack/style-loader )
importsฉันถือว่าคุณอ้างถึง@importคำสั่ง โดยค่าเริ่มต้นคำสั่งนี้ไม่รวมกฎ CSS ที่นำเข้ามาในตัวนำเข้า แต่สร้างGETคำขออื่น คุณกำลังบอกว่าcss-loaderจะส่งคืนผลลัพธ์ที่ถูกผสาน?
css-loaderอ่านในไฟล์ css เป็นสตริง คุณสามารถแทนที่ด้วยraw-loaderและรับผลเช่นเดียวกันในสถานการณ์จำนวนมาก เนื่องจากมันเพิ่งอ่านเนื้อหาไฟล์และไม่มีอะไรอื่นมันไม่มีประโยชน์อะไรเลยนอกจากคุณจะโยงมันด้วยตัวโหลดอื่น
style-loaderใช้สไตล์เหล่านั้นและสร้าง<style>แท็กใน<head>องค์ประกอบของหน้าเว็บที่มีสไตล์เหล่านั้น
หากคุณดูจาวาสคริปต์ภายในbundle.jsหลังจากใช้งานstyle-loaderคุณจะเห็นความคิดเห็นในรหัสที่สร้างขึ้นซึ่งระบุว่า
// style-loader: เพิ่ม css ไปยัง DOM โดยเพิ่มแท็ก
ตัวอย่างเช่น,
<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>
ตัวอย่างนั้นมาจากบทช่วยสอนนี้ หากคุณลบออกstyle-loaderจากไปป์ไลน์โดยการเปลี่ยนบรรทัด
require("!style-loader!css-loader!./style.css");
ถึง
require("css-loader!./style.css");
คุณจะเห็นว่าสิ่งที่<style>หายไป
css-loaderเมื่อเทียบกับraw-loader?
ในการตอบคำถามที่สอง "สิ่งนี้คือ. use.less และ. useable.css ที่กล่าวถึงในไฟล์ Readme.md ข้างต้น?" โดยค่าเริ่มต้นเมื่อสไตล์คือrequire'dโมดูล style-loader จะแทรก<script>แท็กลงใน DOM โดยอัตโนมัติและ แท็กนั้นยังคงอยู่ใน DOM จนกว่าหน้าต่างเบราว์เซอร์จะปิดหรือโหลดซ้ำ โมดูลโหลดเดอร์สไตล์ยังมี "API อ้างอิงนับ" ที่ช่วยให้นักพัฒนาสามารถเพิ่มสไตล์และลบออกในภายหลังเมื่อไม่ต้องการใช้อีกต่อไป API ทำงานดังนี้:
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
ตามแบบแผนสไตล์ชีตที่โหลดโดยใช้ API นี้มีส่วนขยาย ".able.css" มากกว่า ".css" เพียงอย่างเดียว
เอกสารประกอบ Webpack แนะนำให้รวม style-loader กับ css-loader: