คู่มือนี้จะแสดงขั้นตอนทั้งหมดในการตั้งค่าโปรเจ็กต์ Node.js SASS/SCSS ที่รวดเร็ว
วิธีการตั้งค่าโครงการ Node.js Sass/SCSS ที่รวดเร็ว
SASS ใช้คุณสมบัติ CSS ล้วนๆ เพื่อจัดสไตล์เหนือองค์ประกอบที่เลือก มันเสริมพลังให้กับ CSS ดั้งเดิมโดยรวมคุณสมบัติทางคณิตศาสตร์และตัวแปรไว้ด้วย โดยจะใช้สไตล์บน DOM ในลำดับชั้น ด้วยการผสานรวม SASS เข้ากับ Node.js นักพัฒนาสามารถจัดสไตล์โปรเจ็กต์ได้อย่างง่ายดายเพื่อให้ดูสะดุดตาและสมบูรณ์แบบยิ่งขึ้น
มาทำตามขั้นตอนด้านล่างเพื่อตั้งค่าโปรเจ็กต์ Node.js พร้อม SASS/SCSS
ขั้นตอนที่ 1: การติดตั้ง “SASS”
ขั้นแรกให้ติดตั้ง “ สัส ” ทั่วโลกในโครงการ Node.js โดยใช้ตัวจัดการแพ็คเกจโหนด “ เวลา 22.00 น ” ผ่านคำสั่งนี้:
ติดตั้ง npm -g sass
ผลลัพธ์แสดงให้เห็นว่า “ ซาส ” แพ็คเกจได้รับการติดตั้ง:
ขั้นตอนที่ 2: การสร้างไดเรกทอรี
จากนั้น สร้างไดเร็กทอรีแยกต่างหากสำหรับทั้งไฟล์ CSS และ SCSS โดยใช้คำสั่ง “mkdir” ต่อไปนี้:
mkdir cssFiles.mkdir
mkdir scssFiles.mkdir
จะเห็นได้ว่าข้างต้น” mkdir ” คำสั่งได้สร้าง “ cssFiles ' และ ' scssFiles ” ไดเรกทอรี:
ขั้นตอนที่ 3: เชื่อมโยงโมดูล SASS
ตอนนี้ใช้ ' หน้าด้าน ” โมดูลเพื่อดูการเปลี่ยนแปลงใด ๆ ในไฟล์ที่อยู่ของ “ scssFiles ” ไดเรกทอรี ในกรณีที่มีการแก้ไข มันจะสร้างไฟล์ CSS ภายในลิงค์ “ cssFiles ” และแทรกข้อมูล scss เดียวกันลงในไฟล์ CSS
คำสั่งที่จะดำเนินการเพื่อดูและเชื่อมโยง ' หน้าด้าน ” โมดูลเป็นดังนี้:
หน้าด้าน --ดู scssFiles : : cssFilesตอนนี้ saas กำลังเฝ้าดูการแก้ไขทุกประเภทในไดเร็กทอรี scssFiles
บันทึก: คำสั่งข้างต้นควรดำเนินการบน Command Prompt ของระบบ เนื่องจากคำสั่งดังกล่าวจะไม่ทำงานบนเทอร์มินัลเครื่องมือ เช่น รหัส Visual Studio
ขั้นตอนที่ 4: การสร้าง SCSS และไฟล์ CSS ที่สอดคล้องกัน
ในขั้นตอนนี้ ไฟล์ว่างชื่อ “ scssStyle ' กับ ' เอสซีเอส ” ส่วนขยายถูกสร้างขึ้นภายใน “ scssFiles ” ไดเรกทอรี:
หลังจากนั้นมี 2 ไฟล์ชื่อ “ scssStyle.css ' และ ' scssStyle.css.map ” ได้รับการสร้างขึ้นโดยอัตโนมัติโดย “ หน้าด้าน ” โมดูลภายใน “ cssFiles ” ดังที่แสดงด้านล่าง:
ขั้นตอนที่ 5: การใส่รหัส
สุดท้ายให้ป้อนรหัส SCSS บางส่วนภายใน ' scssStyle.scss ” ดังแสดงด้านล่าง:
ตอนนี้โค้ดเดียวกันในรูปแบบ CSS จะถูกแทรกลงในส่วน “ scssStyle.css ' ไฟล์:
เรามาอธิบายขั้นตอนที่ 4 และ 5 ด้วยความช่วยเหลือของ gif กัน:
คู่มือนี้ได้อธิบายขั้นตอนในการสร้างโปรเจ็กต์ Node.js SASS\SCSS
บทสรุป
หากต้องการตั้งค่าโครงการ Node.js SASS/SCSS ที่รวดเร็ว ให้ติดตั้งโมดูลก่อน “ หน้าด้าน ” จากนั้นสร้างสองไดเรกทอรีหนึ่งสำหรับ “ สัส\SCSS ” ไฟล์และอีกไฟล์สำหรับ “ ซีเอสเอส ” ไฟล์ หลังจากนั้นให้ทำการ “ หน้าด้าน ” โมดูลเพื่อดูการเปลี่ยนแปลงใด ๆ ในไดเร็กทอรีที่สร้างขึ้นใหม่ผ่านทาง “ sass – ดู sass: css ' สั่งการ. จากผลของการกระทำนี้ ไฟล์ “SASS\SCSS” และไฟล์ “CSS” สองไฟล์จะถูกสร้างขึ้นโดยอัตโนมัติในโฟลเดอร์ “CSS” หากผู้ใช้แก้ไขไฟล์ “SASS\SCSS” การเปลี่ยนแปลงใหม่จะถูกแทรกลงในไฟล์ CSS โดยอัตโนมัติ คู่มือนี้ได้อธิบายขั้นตอนทั้งหมดสำหรับการตั้งค่าโปรเจ็กต์ Node.js SASS\SCSS