จะแก้ไขค่าพารามิเตอร์ในไฟล์ sass จาก typescript ได้อย่างไร

ฉันกำลังพยายามเปลี่ยนค่าของตัวแปรในไฟล์ "../myStyle.scss" จาก myComponent.ts ฉันอ่านเจอว่ามันเป็นไปไม่ได้ที่จะบรรลุผลสำเร็จเพราะไฟล์ sass ถูกคอมไพล์เป็น css โดยตัวประมวลผลล่วงหน้า sass และตัวแปรก็หายไป ไม่มีวิธีแก้ไขปัญหานี้หรือไม่

ตัวแปรของฉันชื่อ $theme และผมอยากเปลี่ยนค่าของมัน

$ธีม: #5A352A; และฉันอยากให้มันกลายเป็น $theme: #ffffff; เมื่อผู้ใช้คลิก


person esdras    schedule 30.04.2019    source แหล่งที่มา
comment
อ้างถึงโพสต์นี้: stackoverflow com/questions/17787845/   -  person Loïc Monard    schedule 30.04.2019
comment
อาจซ้ำซ้อนกับ วิธีควบคุม Sass Variable ด้วย javascript   -  person לבני מלכה    schedule 30.04.2019


คำตอบ (1)


คุณต้องทำงานในลักษณะที่แตกต่างออกไป

โดยพื้นฐานแล้วเมื่อคุณคอมไพล์แอปเชิงมุม มันจะสร้างไฟล์ css โดยมันจะแทนที่ตัวแปรด้วยค่า ทุกที่ที่คุณใช้มัน

ดังนั้นหากคุณต้องการเปลี่ยนสี คุณต้องสร้างตัวแปรและคลาสอื่น ๆ แล้วปัดมันในแอตทริบิวต์คลาสของคุณ (นี่เป็นวิธีหนึ่ง ให้ตรวจสอบ ngStyle และ ngClass ในการอ้างอิงเชิงมุมด้วย)

ตัวอย่างเช่น ธีมสีขาว/ธีมสีเข้ม (กรณีที่พบบ่อยที่สุด) ตัวแปร -> $black: #00000; $white: #ffffff

คลาสตัวอย่าง:

.body-dark {
 background-color: $black;
}

.body-white {
 background-color: $white;
}

และปัดคลาสในองค์ประกอบ html

setDark(){
document.getElementById("bodyId").setAttribute("class","body-dark ")
}

เช่นเดียวกับสีขาว

person Riccardo Albero    schedule 30.04.2019
comment
ขอบคุณ ฉันรู้วิธีนี้แล้ว แต่ฉันพบว่ามันหนักมาก ทุกสิ่งที่คุณต้องการเปลี่ยนบนหน้าจอจะต้องมีคุณสมบัตินี้ และจะหนักขึ้นเมื่อธีมของคุณมีหลายสี - person esdras; 30.04.2019
comment
บางทีคุณอาจทำงานกับ ngStyle และ ngClass ได้สามารถช่วยค้นหาโซลูชันที่เหมาะกับความต้องการของคุณ codecraft.tv/courses/angular/built-in-directives/ - person Riccardo Albero; 30.04.2019