ฉันจะประกาศ / รวมโฟลเดอร์ scss ที่นำเข้าในไลบรารีของฉันได้อย่างไรเพื่อให้ฉันสามารถเรียก @import ในไฟล์ scss ของแอปพลิเคชันของฉันได้

Aug 17 2020

เป้าหมาย:

ฉันพยายามรวมเส้นทางจากไลบรารีของฉันเพื่อให้ฉันสามารถใช้@importคำสั่งเพื่อรวมไฟล์ scss ในแอปพลิเคชันของฉันดังนี้:

@import "some-scss-in-my-lib"

ปัญหา:

น่าเสียดายทุกครั้งที่ฉันพยายามให้บริการแอปพลิเคชันของฉันฉันได้รับข้อผิดพลาดของคอมไพเลอร์ต่อไปนี้:

SassError: Can't find stylesheet to import.

สิ่งที่ฉันได้ลองแล้ว:

  • การค้นหาใน Stackoverflow ทำให้ฉันพบหัวข้อนี้ซึ่งอธิบายปัญหาเดียวกันกับที่ฉันกำลังเผชิญอยู่ตอนนี้ และฉันได้พยายามรวมเส้นทางกับstyleIncludePathsคุณสมบัติเช่นเดียวกับที่Zainuแนะนำ แต่เมื่อพยายามให้บริการแอปพลิเคชันฉันพบปัญหาที่แน่นอนตามที่อธิบายไว้ในส่วนปัญหา - ส่วนด้านบน

  • ฉันพยายามตั้งค่าstylePreprocessorOptionsคุณสมบัติเช่นGreatHawkeyeในโพสต์แรกและเป็นไปได้@importที่ไฟล์ scss หลังจากใช้ng buildงาน แต่ฉันไม่เข้าใจว่ามันใช้งานstylePreprocessorOptionsได้styleIncludePathsอย่างไรและทำไม

  • ฉันยังลองค้นหาใน Google ซึ่งนำฉันไปสู่ ​​Thread Unable เพื่อรับสไตล์ที่รวมเข้าด้วยกันโดยใช้ตัวเลือก styleIncludePathsซึ่งฉันพบคำตอบโดยAlan Aguisแต่น่าเสียดายที่ไม่มีคำอธิบายที่แท้จริงว่า styleIncludePaths มีไว้เพื่ออะไร สิ่งเดียวที่Alan Aguisพูดคือ:

นั่นเป็นเพราะ styleIncludePaths ถูกเยื้องสำหรับอย่างอื่น

แต่อย่างที่บอกเขาไม่ได้บอกว่า styleIncludePaths คืออะไรซึ่งทำให้ฉันสับสนมากยิ่งขึ้น

ฉันยังพยายามค้นหาหน้าng-packagr githubเกี่ยวกับเอกสารเกี่ยวกับAdd Style Include Pathsบนเธรดวิธีใช้ "styleIncludePaths"แต่ผลลัพธ์ยังคงเหมือนเดิมและฉันไม่พบคำตอบที่ชัดเจนสำหรับปัญหาของฉัน

คำถามเกี่ยวกับปัญหานี้:

  1. styleIncludePaths ใน ng-package.json ถูกใช้เมื่อใด ใช้สำหรับแพ็คเกจที่เผยแพร่เท่านั้นหรือไม่?

  2. stylePreprocessorOptions ใน angular.json ใช้เมื่อใด มันใช้สำหรับเวอร์ชันdistหลังจากรัน ng build แล้วหรือไม่?

  3. อะไรคือความแตกต่างระหว่าง styleIncludePaths จาก ng-package.json โดยทั่วไปเมื่อเทียบกับ stylePreprocessorOptions จาก angular.json

  4. ฉันจะประกาศ / รวมโฟลเดอร์ scss ที่นำเข้าในไลบรารีของฉันได้อย่างไรเพื่อให้ฉันสามารถเรียก @import ในไฟล์ scss ของแอปพลิเคชันของฉันได้

ฉันค่อนข้างแน่ใจว่าฉันทำผิดในคำแนะนำของฉัน แต่ฉันต้องการทราบว่าเกิดอะไรขึ้นและจะแก้ไขปัญหาได้อย่างไร

ความช่วยเหลือใด ๆ เกี่ยวกับเรื่องนี้เป็นที่ชื่นชมอย่างมาก 🙏🏻

คำตอบ

2 FyZ1K Aug 24 2020 at 19:30

ในฐานะที่เป็นคำตอบในGitHub , ฉันพูด alan-agius4 :

พา ธ รวมถูกใช้โดยโปรเซสเซอร์ CSS ในระหว่างการสร้างไลบรารีเพื่อแก้ไขการนำเข้าเมื่อประมวลผลไฟล์ scss / less / stylus ในไฟล์ scss ที่ไม่ได้ประมวลผลของเรือของคุณพา ธ เหล่านี้จะต้องรวมอยู่ที่ระดับแอปพลิเคชันแทนที่จะเป็นระดับไลบรารีเนื่องจากไฟล์ดังกล่าวจะไม่ได้รับการจัดการโดยไปป์ไลน์การสร้างไลบรารี แต่เป็นของแอปพลิเคชัน ไฟล์เหล่านี้จะถูกคัดลอกเป็นไฟล์แบบคงที่ ในกรณีที่คุณไม่ต้องการรวมเส้นทางดังกล่าวที่ระดับแอปพลิเคชันคุณสามารถใช้ประโยชน์จากไวยากรณ์การนำเข้าเครื่องหมายตัวหนอนของ webpack ได้เช่น:

@import "~/my-lib/scss/mixins”.

หมายเหตุ: คุณลักษณะเฉพาะของ webpack ไม่ได้รับการสนับสนุนอย่างเป็นทางการจากทีมเครื่องมือ Angular และอาจพังโดยไม่มีการเตือนล่วงหน้า