Vue.js - VoidCC

में सीएसएस ढांचे मैं अपने Vue.js प्रोजेक्ट में Bulma को एकीकृत करना चाहता हूं।Vue.js

मैंने पहले अपने <head> में सीडीएन स्क्रिप्ट टैग शामिल किया है।

हालांकि इसके बाद, मैंने these official instructions का पालन किया, जिसमें सैस प्री-प्रोसेसर शामिल है, क्योंकि ब्लामा को इसे नोड प्रोजेक्ट में आवश्यकता होती है।

npm install sass-loader node-sass --save-dev 

<style lang="sass"> 
/*write sass here */ 
</style>

अब, <head> में स्क्रिप्ट टैग पर टिप्पणी की जा रही है, और मैं समझ नहीं अपने आवेदन में ठीक से Bulma लोड करने के लिए कैसे।

के रूप में नीचे @BillCriswell ने सुझाव दिया कि मैं अपने रूट घटक शैली टैग में Bulma आयात किया है, इस प्रकार है:

<style lang="scss" src="bulma"></style> 

<style lang="scss"> 
    body { 
    text-align:center; 
    background-color:blue; 
    } 
</style>

और स्टाइलशीट ठीक से भरी हुई है, फिर भी अगर मैं एक और शैली टैग के रूप में आगे सुझाव जोड़ने के लिए, शैली लोड नहीं होती है।

मैं अपने Vue.js प्रोजेक्ट में बुलमा कैसे लोड करूं, और Vue.js में एक सीएसएस ढांचे को एकीकृत करने के लिए अनुशंसित दृष्टिकोण क्या है?

स्रोत

2017-01-31 softcode

आपको bulba's main entry in package.json अंक bulma.sass से ऐसा करने में सक्षम होना चाहिए।

<style lang="sass" src="bulma"></style> 
<style> 
    /* Your css for this file... */ 
</style>

या आप

<style lang="sass"> 
    @import "bulma" 
    /* Your css for this file... */ 
</style>

अपने <script> में import bulma from 'bulma' ऐसा करने के लिए कोई ज़रूरत नहीं है कर सकते हैं।

यदि आप शैली टैग का उपयोग नहीं कर सकते हैं तो यह आपके वेबपैक कॉन्फ़िगरेशन पर निर्भर करेगा। यदि आप vue-cli वेबपैक टेम्पलेट का उपयोग कर रहे हैं तो मुझे विश्वास है कि आपको अच्छा होना चाहिए।

स्रोत

2017-01-31 20:21:33

उत्तर @ बिलक्रिसवेल के उत्तर के लिए धन्यवाद। दरअसल ऐसा लगता है कि स्टाइलशीट को सही ढंग से आयात करना है, हालांकि मैं 'स्टाइल' टैग में लिखने वाले किसी भी SASS को लोड नहीं किया जाता है। – softcode

इसके तहत एक और स्टाइल टैग बनाएं। आप जितना चाहें उतने