एप्लिकेशन .css फ़ाइल नहीं ले रहा है (फ्लास्क / अजगर)

113

मैं एक टेम्प्लेट प्रस्तुत कर रहा हूं, कि मैं बाहरी स्टाइल शीट के साथ स्टाइल करने का प्रयास कर रहा हूं। फ़ाइल संरचना इस प्रकार है।

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html इस तरह दिखता है

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

मेरी कोई भी शैली हालांकि लागू नहीं की जा रही है। क्या इसका इस तथ्य से कोई लेना-देना है कि html एक टेम्प्लेट है जिसे मैं प्रस्तुत कर रहा हूं? अजगर ऐसा दिखता है।

return render_template("mainpage.html", variables..)

मुझे पता है कि यह बहुत काम कर रहा है, क्योंकि मैं अभी भी टेम्पलेट को प्रस्तुत करने में सक्षम हूं। हालाँकि, जब मैंने html के "हेड" टैग के भीतर "स्टाइल" ब्लॉक से अपने स्टाइलिंग कोड को एक बाहरी फ़ाइल में ले जाने की कोशिश की, तो सभी स्टाइल एक नंगे html पेज को छोड़कर चले गए। किसी को भी मेरी फ़ाइल संरचना के साथ कोई त्रुटि दिखाई देती है?

— जैक
स्रोत

225

जब तक आप विशेष रूप से फ्लास्क आरंभीकरण के दौरान इसे ओवरराइड नहीं करते हैं, तब तक आपको 'स्थिर' फ़ोल्डर सेटअप (सीएसएस / जेएस फाइलों के लिए) की आवश्यकता होती है। मैं मान रहा हूं कि आपने इसे ओवरराइड नहीं किया।

सीएसएस के लिए आपकी निर्देशिका संरचना इस प्रकार होनी चाहिए:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

ध्यान दें कि आपकी / शैलियों निर्देशिका अंडर / स्टेटिक होनी चाहिए

फिर, यह करो

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

फ्लास्क अब स्थिर / शैलियों / mainpage.css के तहत सीएसएस फ़ाइल की तलाश करेगा

— codegeek
स्रोत

4

इसे उत्तर के रूप में चिह्नित किया जाना चाहिए। यह समाधान मेरे लिए काम करता है, यदि आपके लिए नहीं है, तो कृपया हमें मदद करने के लिए कहें। नहीं तो झंडी दिखाओ। @ ज़ैक

— शायरीर सलझोई

2

इसे सही उत्तर के रूप में चिह्नित क्यों नहीं किया गया है? यह होना चाहिए।

— pfabri

1

क्षमा करें, यह एक पर वापस आना भूल गया :) स्थिर फ़ोल्डर निश्चित रूप से जाने का रास्ता था

— ज़ैक

1

जावास्क्रिप्ट के लिए स्थिर फ़ोल्डर में स्क्रिप्ट फ़ाइल जोड़ें । <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— Har

17

Jinja2 टेम्प्लेट में (जो फ्लास्क उपयोग करता है), उपयोग करें

href="{{ url_for('static', filename='mainpage.css')}}"

staticफ़ाइलें आमतौर में हैं staticफ़ोल्डर, हालांकि, जब तक अन्यथा कॉन्फ़िगर किया गया।

— njzk2
स्रोत

1

यह मुझे दुर्भाग्य से एक त्रुटि दे रहा है। बिल्डएयर: ('मुख्यपृष्ठ.केएस', {}, कोई नहीं)

— ज़ैक

6

मैंने कई सूत्र पढ़े हैं और उनमें से किसी ने भी इस मुद्दे को तय नहीं किया है कि लोग वर्णन कर रहे हैं और मैंने भी अनुभव किया है।

मैंने कोंडा से दूर जाने और पाइप का उपयोग करने की भी कोशिश की है, अजगर 3.7 में अपग्रेड करने के लिए, मैंने सभी कोडिंग प्रस्तावित करने की कोशिश की है और उनमें से कोई भी निश्चित नहीं है।

और यहाँ क्यों (समस्या) है:

डिफ़ॉल्ट रूप से अजगर / फ्लास्क जैसे फ़ोल्डर संरचना में स्थिर और टेम्पलेट खोजते हैं:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

आप Pycharm (या कुछ और) पर डीबगर का उपयोग करके खुद को सत्यापित कर सकते हैं और ऐप (ऐप = फ्लास्क ( नाम )) पर मानों की जांच कर सकते हैं और टीमप्लेट_फ़ोल्डर और static_folder के लिए खोज कर सकते हैं

इसे ठीक करने के लिए, आपको एप्लिकेशन को कुछ इस तरह बनाते समय मान निर्दिष्ट करना होगा:

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')

# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

पथ TEMPLATE_DIR और STATIC_DIR फ़ाइल ऐप कहां स्थित है, इस पर निर्भर करते हैं। मेरे मामले में, चित्र देखें, यह src के तहत एक फ़ोल्डर के भीतर स्थित था।

आप अपनी इच्छानुसार टेम्प्लेट और स्टैटिक फोल्डर को बदल सकते हैं और ऐप पर रजिस्टर कर सकते हैं = फ्लास्क ...

सच में, मैंने उस समस्या का अनुभव करना शुरू कर दिया है जब फ़ोल्डर के साथ गड़बड़ कर रहा है और कई बार काम नहीं किया है। यह समस्या को एक बार और सभी के लिए ठीक करता है

HTML कोड इस तरह दिखता है:

<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >

यह कोड है

यहां फ़ोल्डर्स की संरचना

— स्टेफानो टवेरी
स्रोत

2

कोडजेक द्वारा प्रदान किए गए समाधान का पालन करने के बाद भी समस्याएँ हैं
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">:?

में गूगल क्रोम पुनः लोड बटन (F5) स्टैटिक फ़ाइलें फिर से लोड नहीं होगा दबाने। यदि आपने स्वीकृत समाधान का पालन किया है, लेकिन फिर भी आपने सीएसएस में किए गए परिवर्तनों को नहीं देखा है, तो ctrl + shift + Rकैश्ड फ़ाइलों को अनदेखा करने और स्थैतिक फ़ाइलों को पुनः लोड करने के लिए दबाएं ।

में फ़ायरफ़ॉक्स पुनः लोड बटन दबाने स्टैटिक फ़ाइलें पुनः लोड करने के लिए प्रकट होता है।

में एज ताज़ा करें बटन स्थिर फ़ाइल लोड नहीं होता है दबाने। दबाने ctrl + shift + Rको कैश्ड फ़ाइलों को अनदेखा करना और स्थिर फ़ाइलों को फिर से लोड करना है। हालाँकि यह मेरे कंप्यूटर पर काम नहीं करता है।

— ईसाई जोहान्सन
स्रोत

बहुत बहुत धन्यवाद, इसने मेरी समस्या को Google Chrome (Ctrl + Shift + R) में हल किया। कैश्ड फ़ाइलों को स्वचालित रूप से अनदेखा करने का कोई तरीका?

— एलेक्सिस

1

मैं अभी 1.0.2 फ्लास्क का संस्करण चला रहा हूं। उपरोक्त फ़ाइल संरचनाएं मेरे लिए काम नहीं करती थीं, लेकिन मैंने एक ऐसा किया, जो इस प्रकार है:

     app_folder/ flask_app.py/ static/ style.css/ templates/
     index.html

(कृपया ध्यान दें कि 'स्टैटिक' और 'टेम्प्लेट' फोल्डर हैं, जिन्हें बिल्कुल उसी चीज का नाम दिया जाना चाहिए।)

यह देखने के लिए कि आपके द्वारा चलाए जा रहे फ्लास्क का कौन सा संस्करण है, आपको टर्मिनल में अजगर को खोलना चाहिए और उसके अनुसार निम्नलिखित टाइप करना चाहिए:

आयात फ्लास्क

कुप्पी - विसर्जन

— Ly-बाख
स्रोत

क्षमा करें, लेकिन क्या आप वास्तव में वर्णन कर सकते हैं कि आपने क्या किया? मैं उसी मुद्दे से जूझ रहा हूँ!

— user3002996

0

फ्लास्क परियोजना की संरचना अलग है। जैसा कि आपने प्रश्न में उल्लेख किया है कि परियोजना की संरचना समान है लेकिन एकमात्र समस्या शैलियों के फ़ोल्डर है। स्टाइल्स फ़ोल्डर को स्टैटिक फ़ोल्डर में आना चाहिए।

static/styles/style.css

— गोपी पी
स्रोत

0

इस धागे को जोड़ने के लिए एक और बिंदु।

यदि आप अपने .css फ़ाइल नाम में एक अंडरस्कोर जोड़ते हैं, तो यह काम नहीं करेगा।

— SW Jeong
स्रोत

0

जोड़ने के लिए एक और बिंदु। ऊपर दिए गए उत्तरों के साथ लंबे समय तक, कृपया सुनिश्चित करें कि app.pyफ़ाइल में नीचे की रेखा जोड़ी गई है:

app = Flask(__name__, static_folder="your path to static")

अन्यथा फ्लास्क स्थिर फ़ोल्डर का पता लगाने में सक्षम नहीं होगा।

— संजय नंदकुमार
स्रोत

0

यदि उपरोक्त में से कोई भी विधि काम नहीं कर रही है और आप कोड सही है तो Ctrl + F5 दबाकर कठिन रिफ्रेशिंग का प्रयास करें। यह सभी चेस को साफ करेगा और फिर फाइल को लोड करेगा। इसने मेरे लिए काम किया।

— Hackytech
स्रोत

-8

मुझे पूरा यकीन है कि यह लारवेल टेम्पलेट के समान है, यह है कि मैंने कैसे किया।

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

संदर्भित: CSS फ़ाइल पाथिंग समस्या

एक। Html फ़ाइल से इसकी सामग्री को पढ़ने वाला सरल फ्लास्क एप्लिकेशन। बाहरी स्टाइल शीट ब्लॉक की जा रही है?

— nCore
स्रोत

2

आपको वोट देने नहीं जा रहा है, लेकिन आपके संपादन के लिए, लारवेल PHP है और फ्लास्क पायथन है। वे एक समान तरीके से काम नहीं करते हैं। उनके पास बहुत अलग निर्देशिका संरचनाएं और व्यवहार हैं।

— श्री कॉनसोलैटो

स्थिर फ़ाइलों को आयात करने के लिए हमें उन स्थिर फ़ाइलों को एक स्थिर फ़ोल्डर में रखने की आवश्यकता है। आपके द्वारा दिए गए फ़ोल्डर की संरचना एक सामान्य HTML फ़ाइल के साथ काम करती है। लेकिन फ्लास्क के साथ नहीं

— गोपी पी