एससीएसएस कोड के साथ त्रुटि, "! महत्वपूर्ण" के बिना मीडिया प्रश्नों में कुछ भी स्टाइल नहीं कर सकता। क्या गलत हो सकता है और हर बार जब मैं main.scss के अलावा किसी भी scss फ़ाइल को सहेजता हूं तो यह एक त्रुटि का कारण बनता है लेकिन जब मैं main.scss फ़ाइल सहेजता हूं तो यह ठीक काम करता है। कोई सुझाव? मैं वेबपैक का उपयोग कर रहा हूं।

 .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
        width: 80%;
    }
}

@media screen and (min-width: 8em) and (orientation: landscape) {
    .logo {
        width: 60% !important;
    }
}

@media screen and (min-width: 767px) {
    .logo {
        width: 40% !important;
    }
}

@media screen and (min-width: 1200px) {
    .logo {
        width: 20% !important;
    }
}
0
Harpreet 15 अप्रैल 2020, 17:57

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह प्रतीत होती है कि आप .logo को .loading के अंदर उपयोग कर रहे हैं

इसे इस तरह करने का प्रयास करें

.loading {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
    width: 80%;
}

इस तरह आप बिना !important के मीडिया प्रश्नों का उपयोग करने में सक्षम होंगे।

नेस्टेड तरीके में मीडिया क्वेरी की तुलना में अधिक जटिलता है, इसलिए आपको !important का उपयोग करना पड़ा।

1
EWR 15 अप्रैल 2020, 17:06