ใน VS <= 2015 เราสามารถใช้ส่วนขยาย WebEssentials ที่ดูแลการคอมไพล์ไฟล์ less / sass ให้เราได้ แต่ตอนนี้ยังไม่รองรับ VS 2017 คุณทราบถึงส่วนขยายที่คล้ายกันที่สามารถคอมไพล์ less / sass ในบิลด์ได้หรือไม่?
วิธีรวบรวมไฟล์ less / sass ใน Visual Studio 2017
คำตอบ:
WebEssentials ถูกแบ่งออกเป็นหลายส่วนขยาย ฉันเชื่อว่าฟังก์ชันที่คุณต้องการอยู่ในส่วนขยายWeb Compilerแล้ว
หากคุณต้องการทำโดยไม่มีส่วนขยายคุณสามารถใช้ Task Runner เช่น Gulp ดูที่นี่สำหรับคำแนะนำถึงวิธีการที่จะบูรณาการงานอึกเข้าเทียบกับ
ฉันใช้ Web Compiler เป็นส่วนขยายใน VS 2019 เพื่อช่วยรวบรวมไฟล์ .less ที่เก่ามากและยังใช้งานได้ดี
—
klewis
หมายเหตุ: เว็บคอมไพเลอร์ถูกละทิ้งการอัปเดตล่าสุดเมื่อ 5 ปีที่แล้ว มีปัญหาที่ไม่ได้แก้ไข แต่ก็ใช้ได้ดี
—
Alex
อัปเดต - โปรดอ่านหน้านี้เนื่องจากฉันได้เพิ่มคำตอบเพิ่มเติม (ไม่มีอีกแล้วที่จะทำงานให้ฉัน)
สำหรับผู้ที่ไม่รู้จัก Gulp หรือ Grunt หรือ Shriek หรือ Wail และไม่ต้องการคุณสามารถใช้ Visual Studio 2017 เพื่อรวบรวมไฟล์ SCSS ของคุณโดยอัตโนมัติเช่นเดียวกับที่ใช้ใน Visual Studio 2015 ขั้นตอนด้านล่างใช้ได้ผลสำหรับฉัน
ก่อนอื่นให้ถอนการติดตั้งส่วนขยาย / แพ็คเกจ Nuget เก่าสำหรับ Web Compiler (ฉันไม่รู้ว่าจำเป็นหรือไม่)
ไปที่หน้าดาวน์โหลดแกลเลอรี VSIXและเลือกดาวน์โหลด Web Compiler
โปรดทราบว่าฉันทำสิ่งนี้ก่อนโดยเลือกTools / Extensions and Updatesใน Visual Studio แม้ว่าสิ่งนี้จะดูเหมือนใช้งานได้ แต่ฉันพบว่าไฟล์ SCSS บางส่วนของฉันไม่ได้ถูกคอมไพล์เป็น CSS โดยอัตโนมัติเมื่อฉันทำการเปลี่ยนแปลง (ฉันไม่ใช่คนเดียว )
ตอนนี้คุณควรจะสามารถคลิกขวาที่ไฟล์ SCSS หลักของคุณและเลือกตัวเลือกที่แสดงด้านล่างซึ่งจะสร้างไฟล์ที่เรียกว่าcompilerconfig.jsonโดยอัตโนมัติในรูทของโปรเจ็กต์ของคุณ (ขั้นตอนนี้อาจไม่จำเป็นหากคุณมีไฟล์นี้อยู่แล้ว) :
จากจุดนี้ทุกอย่างดูเหมือนจะเรียบร้อย วุ้ย ขอบคุณ Mads Kristensen สำหรับส่วนขยายนี้ - ทุกอย่างเพื่อหลีกเลี่ยงการเรียนรู้สิ่งใหม่ ...
ฉันไม่เข้าใจความคิดเห็นนี้! ไม่แน่ใจว่าคำตอบใดที่ได้รับการยอมรับ แต่ไม่มีคำตอบใดที่เหมือนกับคำตอบที่ฉันให้
—
Andy Brown
คำตอบที่ยอมรับคือคำตอบที่มีขีดสีเขียวอยู่ ขณะนี้มีการโหวตมากที่สุดและแนะนำให้ใช้ส่วนขยาย Web Compiler เดียวกัน อย่างไรก็ตามฉันชอบคำตอบของคุณเพราะรูปภาพ
—
Mihail Shishkov
ขอบคุณ. คำตอบของฉันให้คำตอบโดยไม่ต้องใช้ Gulp / Grunt และยังให้รายละเอียดเพิ่มเติมที่ผู้คนต้องการ ฉันดูคำตอบที่ติ๊กไว้ (ในกลุ่มคนอื่น ๆ ) แต่มันไม่สามารถแก้ปัญหาของฉันได้หากไม่มีข้อมูลเพิ่มเติมด้านบน - ด้วยเหตุนี้ฉันจึงพยายามโพสต์เพื่อหลีกเลี่ยงไม่ให้คนอื่นเสียเวลาไปกับการพยายามแก้ไขปัญหานี้ .
—
Andy Brown
ลองอ่านคำตอบที่ยอมรับมันพูดในสิ่งเดียวกัน แต่ยังแนะนำวิธีใช้ Gulp
—
Keith Nicholas
ตกลงฉันเห็นว่าตอนนี้คำตอบที่ยอมรับพูดในสิ่งเดียวกันดังนั้นฉันจึงเพิ่มรายละเอียดเพิ่มเติม หวังว่าผู้อ่านที่ขี้เกียจอย่างฉันอาจพบว่าสิ่งนี้มีประโยชน์!
—
Andy Brown
คำตอบง่ายๆ:
- เพื่อรวบรวมทั้งไฟล์ LESS & SASS: Web CompilerหรือWeb Essentials 2017 (รวมหลายนามสกุล)
- เพื่อรวบรวมเฉพาะ SASS (SCss) fiels: CompileSass
- เพื่อรวบรวมเฉพาะไฟล์LESS : LESS Compiler
คำตอบก่อนหน้านี้ใช้ได้ผลกับฉันมา 2-3 เดือนแล้ว แต่ตอนนี้ใช้ไม่ได้ เมื่อฉันพยายามรวบรวมฉันได้รับข้อความในหน้าต่างข้อผิดพลาดเกี่ยวกับปัญหาเกี่ยวกับสกีมา CompilerConfig และไม่สามารถแก้ปัญหานี้ได้ (ทั้ง Googling หรือการติดตั้ง / ถอนการติดตั้งไม่ช่วย)
ดังนั้นคำตอบทางเลือกคือการใช้CompileSASSซึ่งเป็น Add-in ที่ง่ายกว่ามากโดยมีเอกสารออนไลน์น้อยกว่า (มาก) แต่ทำงานได้ดี ข้อเสียเพียงอย่างเดียวที่ฉันเห็นคือ:
- CSS ที่สร้างขึ้นนั้นอยู่ในโฟลเดอร์เดียวกับ SCSS ดังนั้นฉันจึงต้องย้ายสิ่งต่างๆในเว็บไซต์ของฉันเล็กน้อยเพื่อรองรับสิ่งนี้ และ
- CSS ที่สร้างขึ้นจะถูกย่อขนาดเท่านั้นเท่าที่ฉันเห็น
เมื่อคุณติดตั้ง Add-in แล้ว (ฉันใช้ VS 2017) คุณสามารถไปที่ Tools> Options เพื่อเปลี่ยนการตั้งค่า:
หวังว่าจะกลับมาทำงานต่อได้แล้ว! ขอขอบคุณผู้เขียน Add-in ทั้งหมด - ไม่ได้ตั้งใจที่จะบ่น
สิ่งที่ดีที่ฉันเลื่อนมาตลอดทางในครั้งนี้ ฉันกำลังจะทำตามข้อเสนอแนะของคุณ ตอบ. บางทีคุณควรอัปเดตด้วยโน้ตหากคุณคิดว่าคำตอบใช้ไม่ได้แล้ว :)
—
radbyx
ทำงานอย่างมีเสน่ห์ ขอบคุณมาก.
—
radbyx
หากคุณมี Web Compiler อยู่แล้วและพบข้อผิดพลาดเดียวกันกับที่อธิบายไว้ในโพสต์นี้โปรดดูโพสต์ของฉันที่นี่: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…
—
Matt G
ฉันเพิ่งดาวน์โหลด Web Compiler สำหรับ Visual Studio 2019 และจนถึงตอนนี้มันทำงานได้อย่างสมบูรณ์แบบ มีปัญหาเฉพาะสำหรับ Visual Studio 2017 หรือไม่
—
Andy Brown
ขณะนี้ยังมีคอมไพเลอร์ที่เฉพาะเจาะจงน้อยกว่า https://github.com/madskristensen/LessCompiler
ฉันดาวน์โหลดและติดตั้งส่วนขยาย จากนั้นฉันก็เปิดไฟล์ Site.less ของฉันและฉันสามารถดูได้ว่ามีลายน้ำอยู่ที่ใดเพื่อปรับแต่งบนคอมไพเลอร์ จากนั้นฉันก็สร้างไซต์ของฉันและเปิดขึ้นในโหมดดีบัก เมื่อฉันเปิด Site.css ของฉันซึ่งอยู่ภายใต้ Site.less จะมีการสร้าง watermak อยู่ จากนั้นฉันพยายามค้นหาคุณสมบัติที่เพิ่มเข้ามาใหม่ แต่ไม่พบและไม่ได้รับ CSS มีความคิดอย่างไรที่จะนำไปสร้าง LESS ของฉันได้บ้าง?
—
Caverman