เครื่องหมายทิลเดอร์ `~` ใน CSS `url ()` ทำอะไร?

เช่น @import url("~./foobar");

เห็นที่นี่ไม่แน่ใจว่าเป็นสิ่งเฉพาะของแพ็คเกจหรือว่าเป็นไวยากรณ์ CSS จริง

โดยทั่วไปเส้นทางCSS@import<url>จะสัมพันธ์กับไดเร็กทอรีการทำงานปัจจุบัน

ดังนั้นการใช้คำนำหน้าที่~จุดเริ่มต้นของเส้นทางจะบอกให้ตัวโหลด Webpack แก้ไขการนำเข้า "like a module" โดยเริ่มจากnode_modulesไดเร็กทอรี

นั่นหมายความว่าถ้าคุณมีโมดูลโหนดที่เรียกว่าnormalizeติดตั้งและคุณต้องนำเข้าไฟล์จากภายในชื่อ/normalize.cssคุณสามารถทำได้ด้วย:

@import "~normalize/normalize.css";

ในตัวอย่างที่เชื่อมโยงภายในมีการนำเข้าโมดูลที่เรียกว่าfont-loader/example/test.jsfont-boon

var boon = require('./font-boon');

ภายในfont-loader/example/test.cssโมดูลฟอนต์บูน @ อิมพอร์ตเพื่อให้พร้อมใช้งานในรูปแบบtext.css.

@import url("~./font-boon");