ग्रंट वायर्डेप यमन एंगुलर ट्यूटोरियल

Question

में बूटस्ट्रैप सीएसएस फ़ाइलों को इंजेक्शन नहीं दे रहा है। मैं यमन (http://yeoman.io/codelab.html) का उपयोग करके एंगुलरजेएस ऐप स्थापित करने के ट्यूटोरियल के माध्यम से जा रहा हूं, और बूटस्ट्रैप की सीएसएस फाइलें index.html फ़ाइल में शामिल नहीं हो रही हैं। तो जब मैं grunt सेवा चलाता हूं, तो पृष्ठ ट्यूटोरियल छवि में दिखाए गए कार्यों के विपरीत, सभी बूटस्ट्रैप शैलियों को याद कर रहा है।

हालांकि बूटस्ट्रैप जावास्क्रिप्ट फ़ाइलों को index.html फ़ाइल में शामिल किया गया है।

क्या यह सामान्य व्यवहार है या क्या मैं इसे मैन्युअल रूप से शामिल करना चाहता हूं? मैं index.html फ़ाइल में <!-- bower:css --><!-- endbower --> प्लेसहोल्डर्स के बीच बूटस्ट्रैप सीएसएस फ़ाइलों को शामिल करने के लिए ग्रंट वायर्डेप चलाने की अपेक्षा करता?

Answer 1

अपने bower.json फाइल करने के लिए बूटस्ट्रैप के लिए ओवरराइड कोड जोड़ें (bower_components में कुछ भी संपादित नहीं करते)

"dependencies": { 
... 
}, 
"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "less/bootstrap.less" 
     ] 
    } 
} 

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 2

क्या आपने बूटस्ट्रैप विकल्प चुना था जब आपने बूटस्ट्रैप के सैस संस्करण का उपयोग किया था। मैं बस निम्नलिखित विकल्प

? Would you like to use Sass (with Compass)? Yes 
? Would you like to include Bootstrap? Yes 
? Would you like to use the Sass version of Bootstrap? Yes 

यह ठीक करने के लिए यह काम करता है।

जब आप इस प्रवाह का उपयोग करते थे, तो आपकी main.scss फ़ाइल में निम्न पंक्ति शामिल थी।

// bower:scss 
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"; 
// endbower 

यदि यह निश्चित रूप से बूटस्ट्रैप शैली को लागू करने की आवश्यकता है।

यदि आप बूटस्ट्रैप विकल्प के बिना जाते हैं। निम्न आदेश का उपयोग कर बूटस्ट्रैप को स्थापित करने के लिए आपको कमांड लाइन में उपयोग करने की आवश्यकता है। बोवर बूटस्ट्रैप-एस '-S' आवश्यक है। उसके बाद आप देखते हैं कि यह index.html के लिए bootstrap.css फ़ाइल इंजेक्शन नहीं है। फिर आपको बूटस्ट्रैप फ़ोल्डर में bower.json फ़ाइल में छोटे बदलाव करना होगा। , निम्न स्थान ब्राउज

"main": [ 
"less/bootstrap.less", 
"dist/js/bootstrap.js" 
], 

and change as follow, 

"main": [ 
"less/bootstrap.less", 
"dist/js/bootstrap.js", 
"dist/js/bootstrap.css", 
"dist/js/bootstrap-theme.css" 
], 

फ़ाइल को बचाने bower.json

/bower_components/bootstrap/ 

ओपन bower.js खोजने के लिए और निम्नलिखित के टुकड़े को खोजने के लिए और घुरघुराना फिर से आदेश की सेवा चलाते हैं।

Answer 3

मैं एक ही मुद्दा था और है कि क्या मैं इंटरनेट पर पाया है इसे हल करने के लिए:

आपने शायद बूटस्ट्रैप के संस्करण 3.3.5 को स्थापित किया है। आप इसे अपनी परियोजना की bower.json फ़ाइल में सत्यापित कर सकते हैं।

"bootstrap": "3.3.5" 

यदि हां, तो मैं इन दो विकल्पों में पाया सीएसएस शैली वापस पाने के लिए:

1. आप बुनियादी सीएसएस के बजाय बूटस्ट्रैप के लिए सास स्थापित कर सकते हैं, @ नितिन के निर्देशों का पालन अगर आप चाहते हैं।

2. या बूटस्ट्रैप के संस्करण 3.3.5 में, वायर्डेप कार्य आपके index.html में bootstrap.css को इंजेक्ट नहीं करता है (इसे जल्द ही ठीक किया जाना चाहिए), ताकि आप अपने बूटस्ट्रैप संस्करण को 3.3 पर डाउनग्रेड कर सकें।एक कमांड प्रॉम्प्ट में निम्नलिखित लिख कर 4: स्थापित

   सीडी /../your-project-dir/

   बोवर बूटस्ट्रैप # 3.3.4

तो folowing चलाएँ:

bower install 
grunt wiredep 

और एक

grunt serve 

साथ फिर से प्रयास

उम्मीद है कि यह आपकी मदद करेगा।

इन स्रोतों ने मुझे मेरी समस्या का समाधान करने में मदद की। Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

Answer 4

बूटस्ट्रैप से आधिकारिक जवाब ओवरराइड bower.son में ब्लॉक का उपयोग करने के लिए है:

"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "less/bootstrap.less" 
    ] 
    } 
} 

बोवर के विनिर्देश में अस्पष्टता के कारण, wiredep कैसे के बारे में कुछ संदिग्ध मान्यताओं बनाया bower.json में मुख्य क्षेत्र काम करता है। हाल ही में, बोवर ने इसका पता लगाने के लिए अपने स्पेस को अपडेट किया और स्पष्ट किया कि मुख्य कैसे काम करना चाहिए, और हमने तदनुसार हमारे bower.json को अपडेट किया। दुर्भाग्यवश, यदि आप बूटस्ट्रैप के वेनिला प्रीकंपिल्ड सीएसएस के साथ इसका इस्तेमाल कर रहे थे तो परिणामस्वरूप तारों को तोड़ दिया गया। बोवर इस समस्या को हल करने और वायर्डेप जैसे बेहतर सहायक उपकरण के लिए अपने spec को और अद्यतन करने के लिए काम कर रहा है।

स्रोत: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 5

भी यह चिंताओं नया बूटस्ट्रैप 4.

और वहाँ एक महत्वपूर्ण बात यह है: आप बूटस्ट्रैप के "निर्भरता" जोड़ने के लिए सुनिश्चित करें कि jQuery bootstrap.js से पहले इंजेक्शन दिया जाएगा करने की आवश्यकता है

"dependencies": { 
(...) 
}, 
"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "scss/bootstrap.scss",// <-- for new Bootstrap 
     "less/bootstrap.less" // <-- for old Bootstrap 
    ], 
    "dependencies": { 
     "jquery": ">= 3.2.1" 
    } 
    } 
}