मेरे पास एक बहुत ही अजीब मुद्दा है। Vue CLI के साथ एक ताज़ा जनरेट किए गए vue.js प्रोजेक्ट में मेरी scss फ़ाइलें ठीक से काम नहीं कर रही हैं। मैं इस तरह vue.config.js में कॉन्फ़िगर किए गए scss का उपयोग कर रहा हूं:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/all.scss";
        `
      }
    }
  }
};

मेरे पास scss फ़ोल्डर में कई फाइलें हैं जो तब तक ठीक हैं जब तक कि मैं एकल फ़ाइल घटक में स्कोप्ड कीवर्ड का उपयोग कर रहा हूं, उदाहरण के लिए my nav. और फिर मेरी वैश्विक शैलियों को किसी कारण से अनदेखा कर दिया जाता है:

<template>
  <div class="nav">
    <ul class="nav__menu">
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
 .nav {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,00c2a9+100 */
   background: rgb(30, 87, 153); /* Old browsers */
   background: -moz-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* FF3.6-15 */
   background: -webkit-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(
     to bottom,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#00c2a9',GradientType=0 ); /* IE6-9 */
   border-radius: 15px;
   color: #fff;
   height: calc(100vh - 8px);
   padding: 10px;
   position: fixed;
   top: 4px;
   left: 4px;
   width: 200px;
   z-index: 5;
 }
</style>

वैश्विक शैली:

// not working
html {
  background: black;
  box-sizing: border-box;
  font-size: 13px;

  // but this is working
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
}

मेरे साथ अब तक ऐसा कभी नहीं हुआ। क्या मुझे कुछ याद आ रहा है, क्योंकि मैं इसे नहीं देख सकता :( अग्रिम धन्यवाद।

मैं मंज़रो लिनक्स 18.1.5 पर हूं, नोड.जेएस 10.16.0 और एनपीएम 6.13.1 के साथ अगर यह मदद कर सकता है।

0
Zdravko Pernikov 17 फरवरी 2020, 16:01

1 उत्तर

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

भावी पाठकों के लिए - मुझे समस्या मिली... scss फ़ाइलें किसी घटक में आयात नहीं की जाती हैं यदि उसमें गैर-रिक्त शैली टैग नहीं है।

पता चला कि प्रत्येक scss फ़ाइल को सभी घटकों में आयात करना बहुत बुरा विचार है, क्योंकि यह अंत में बहुत सारे अप्रयुक्त/डुप्लिकेट कोड के साथ एक बहुत बड़ी css फ़ाइल की ओर ले जाएगा।

तो अब मैं 'वैश्विक' एससीएसएस फाइलों का उपयोग केवल चर और मिश्रणों के लिए कर रहा हूं और सब कुछ सुचारू रूप से चलता है।

3
Zdravko Pernikov 18 फरवरी 2020, 09:49