דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. scss ייבוא משתנים לקומפוננטים

scss ייבוא משתנים לקומפוננטים

מתוזמן נעוץ נעול הועבר תכנות
9 פוסטים 3 כותבים 224 צפיות 1 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • chagoldC מנותק
    chagoldC מנותק
    chagold
    כתב ב נערך לאחרונה על ידי
    #1

    בפרוייקט צד הלקוח יש קבצי scss, ויש שם גם קובץ הגדרות לערכים אוניברסליים (כמו צבע גופן תוכן, צבע רקע וכו וכו).

    הערכים נשמרים במשתנים שמתחילים ב$.

    ניסיתי להשתמש עם המשתנים האלו בתוך הקומפוננטים (vue) (בין תגי <style>) והוא לא מכיר במשתנים הנ"ל.

    איך יש אפשרות להשתמש עם זה בקומפוננטים?

    תודה

    רפאלר תגובה 1 תגובה אחרונה
    0
    • chagoldC chagold

      בפרוייקט צד הלקוח יש קבצי scss, ויש שם גם קובץ הגדרות לערכים אוניברסליים (כמו צבע גופן תוכן, צבע רקע וכו וכו).

      הערכים נשמרים במשתנים שמתחילים ב$.

      ניסיתי להשתמש עם המשתנים האלו בתוך הקומפוננטים (vue) (בין תגי <style>) והוא לא מכיר במשתנים הנ"ל.

      איך יש אפשרות להשתמש עם זה בקומפוננטים?

      תודה

      רפאלר מנותק
      רפאלר מנותק
      רפאל
      כתב ב נערך לאחרונה על ידי
      #2

      @chagold עליך לציין שאתה מעוניין בתחביר SCSS

      <style lang="scss">
        @import "./_variables.scss";
      </style>
      
      chagoldC תגובה 1 תגובה אחרונה
      5
      • רפאלר רפאל

        @chagold עליך לציין שאתה מעוניין בתחביר SCSS

        <style lang="scss">
          @import "./_variables.scss";
        </style>
        
        chagoldC מנותק
        chagoldC מנותק
        chagold
        כתב ב נערך לאחרונה על ידי
        #3

        @רפאל הייבוא הוא כמו שאני מייבא כל קומפוננט?
        כי בקומפוננטים הנתיב הוא (למשל)

        import boxdropdown from '@/components/Widgets/BoxDropdown'
        
        

        וממילא כאן כשהכל מתחת ה-assets אז הנתיב הוא

        @import "@/assets/scss/_custom-var.scss";
        

        אבל יש לי שגיאה שהוא לא מזהה את המשתנים שם.

        SassError: Undefined variable: "$white".
        

        והיינו כיון שהוא מייבא את הקובץ גולמי במקום לייבא אותו עם כל נתוני המשתנים שיש בו.


        זה מבנה התיקיות
        9163bf57-5e8e-4e6f-ac6a-e5f0b7dc3312-image.png

        רפאלר תגובה 1 תגובה אחרונה
        0
        • chagoldC chagold

          @רפאל הייבוא הוא כמו שאני מייבא כל קומפוננט?
          כי בקומפוננטים הנתיב הוא (למשל)

          import boxdropdown from '@/components/Widgets/BoxDropdown'
          
          

          וממילא כאן כשהכל מתחת ה-assets אז הנתיב הוא

          @import "@/assets/scss/_custom-var.scss";
          

          אבל יש לי שגיאה שהוא לא מזהה את המשתנים שם.

          SassError: Undefined variable: "$white".
          

          והיינו כיון שהוא מייבא את הקובץ גולמי במקום לייבא אותו עם כל נתוני המשתנים שיש בו.


          זה מבנה התיקיות
          9163bf57-5e8e-4e6f-ac6a-e5f0b7dc3312-image.png

          רפאלר מנותק
          רפאלר מנותק
          רפאל
          כתב ב נערך לאחרונה על ידי
          #4

          @chagold הכל נראה כשורה. אולי כדאי שתשתף את הקוד המדובר.

          chagoldC תגובה 1 תגובה אחרונה
          0
          • רפאלר רפאל

            @chagold הכל נראה כשורה. אולי כדאי שתשתף את הקוד המדובר.

            chagoldC מנותק
            chagoldC מנותק
            chagold
            כתב ב נערך לאחרונה על ידי
            #5

            @רפאל

            <style lang="scss">
            
                @import "@/assets/scss/_custom-var.scss";
                
                .nav-continor-box{
                    color:$header-icon-color
                }
            
            </style>
            

            87048820-b982-42ce-844c-89418f793eb1-image.png

            yossizY תגובה 1 תגובה אחרונה
            0
            • chagoldC chagold

              @רפאל

              <style lang="scss">
              
                  @import "@/assets/scss/_custom-var.scss";
                  
                  .nav-continor-box{
                      color:$header-icon-color
                  }
              
              </style>
              

              87048820-b982-42ce-844c-89418f793eb1-image.png

              yossizY מנותק
              yossizY מנותק
              yossiz
              כתב ב נערך לאחרונה על ידי
              #6

              @chagold אתה בטוח ש-scss יודע לתרגם את ה-@? זה משהו של וובפאק

              📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

              chagoldC רפאלר 2 תגובות תגובה אחרונה
              0
              • yossizY yossiz

                @chagold אתה בטוח ש-scss יודע לתרגם את ה-@? זה משהו של וובפאק

                chagoldC מנותק
                chagoldC מנותק
                chagold
                כתב ב נערך לאחרונה על ידי
                #7

                @yossiz הוא ודאי קורא את הקובץ. ה-white$ הוא מתוך הקובץ שקראתי לו.

                תגובה 1 תגובה אחרונה
                1
                • yossizY yossiz

                  @chagold אתה בטוח ש-scss יודע לתרגם את ה-@? זה משהו של וובפאק

                  רפאלר מנותק
                  רפאלר מנותק
                  רפאל
                  כתב ב נערך לאחרונה על ידי רפאל
                  #8

                  @yossiz אמר בscss ייבוא משתנים לקומפוננטים:

                  זה משהו של וובפאק

                  אכן זהו פיצר של Webpack הנקרא resolve.alias המאפשר יצירת קיצורים עבור נתיבים הנמצאים בשימוש תכוף.
                  בתבנית של Vue Webpack (ברירת המחדל של Vue-Cli) הסימן "@" מוגדר להחליף את הנתיב "src".

                  @yossiz אמר בscss ייבוא משתנים לקומפוננטים:

                  @chagold אתה בטוח ש-scss יודע לתרגם את ה-@?

                  הLoader הראשון בתבנית של Vue Webpack עבור קבצי Styles הוא Css-Loader המתייחס לimport@ ו()url בדומה לimport/require בJS (דבר המאפשר שימוש בנתיבים יחסיים בהתאם למבנה הקבצים), לאחר מכן הLoader פותר את הנתיבים, ובסיום מחזיר מחרוזת טקסט (המכילה את תוכנם של כל קובצי הStyles) שתועבר בתורה לLoader הבא, ובמילים פשוטות התהליך מתבצע ללא קשר לתחביר של קובץ הStyle.

                  @chagold אמר בscss ייבוא משתנים לקומפוננטים:

                  @yossiz הוא ודאי קורא את הקובץ. ה-white$ הוא מתוך הקובץ שקראתי לו.

                  הקטע ששיתפת אינו רלוונטי משום שהמשתנה White אינו בא בו לידי שימוש, אולי כדאי לשחזר את הבעיה ע"י יצירת פרויקט חדש (בStackblitz למשל) ושיתופו כאן.

                  chagoldC תגובה 1 תגובה אחרונה
                  6
                  • רפאלר רפאל

                    @yossiz אמר בscss ייבוא משתנים לקומפוננטים:

                    זה משהו של וובפאק

                    אכן זהו פיצר של Webpack הנקרא resolve.alias המאפשר יצירת קיצורים עבור נתיבים הנמצאים בשימוש תכוף.
                    בתבנית של Vue Webpack (ברירת המחדל של Vue-Cli) הסימן "@" מוגדר להחליף את הנתיב "src".

                    @yossiz אמר בscss ייבוא משתנים לקומפוננטים:

                    @chagold אתה בטוח ש-scss יודע לתרגם את ה-@?

                    הLoader הראשון בתבנית של Vue Webpack עבור קבצי Styles הוא Css-Loader המתייחס לimport@ ו()url בדומה לimport/require בJS (דבר המאפשר שימוש בנתיבים יחסיים בהתאם למבנה הקבצים), לאחר מכן הLoader פותר את הנתיבים, ובסיום מחזיר מחרוזת טקסט (המכילה את תוכנם של כל קובצי הStyles) שתועבר בתורה לLoader הבא, ובמילים פשוטות התהליך מתבצע ללא קשר לתחביר של קובץ הStyle.

                    @chagold אמר בscss ייבוא משתנים לקומפוננטים:

                    @yossiz הוא ודאי קורא את הקובץ. ה-white$ הוא מתוך הקובץ שקראתי לו.

                    הקטע ששיתפת אינו רלוונטי משום שהמשתנה White אינו בא בו לידי שימוש, אולי כדאי לשחזר את הבעיה ע"י יצירת פרויקט חדש (בStackblitz למשל) ושיתופו כאן.

                    chagoldC מנותק
                    chagoldC מנותק
                    chagold
                    כתב ב נערך לאחרונה על ידי chagold
                    #9

                    @רפאל דבר ראשון תודה רבה על ההשקעה הגדולה בתשובות.

                    תפסתי את הבעיה. קראתי לקובץ מסויים במקום לקרוא לקובץ הstyle.scss ה'שורש', שבו מרוכזים כמה קריאות @import למכלול קבצי הגדרות הscss (וזוהי הסיבה שה$white לא הוכר, כיון שהוא הוגדר בקובץ אחר).

                    תגובה 1 תגובה אחרונה
                    6
                    תגובה
                    • תגובה כנושא
                    התחברו כדי לפרסם תגובה
                    • מהישן לחדש
                    • מהחדש לישן
                    • הכי הרבה הצבעות


                    בא תתחבר לדף היומי!
                    • התחברות

                    • אין לך חשבון עדיין? הרשמה

                    • התחברו או הירשמו כדי לחפש.
                    • פוסט ראשון
                      פוסט אחרון
                    0
                    • דף הבית
                    • קטגוריות
                    • פוסטים אחרונים
                    • משתמשים
                    • חיפוש
                    • חוקי הפורום