แอปพลิเคชันไม่ดึงไฟล์. css (flask / python)

Question 1

ฉันกำลังแสดงเทมเพลตซึ่งฉันกำลังพยายามจัดรูปแบบด้วยสไตล์ชีตภายนอก โครงสร้างไฟล์มีดังนี้

/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..)

ฉันรู้ว่าสิ่งนี้ใช้ได้ผลดีเพราะฉันยังสามารถแสดงเทมเพลตได้ อย่างไรก็ตามเมื่อฉันพยายามย้ายโค้ดสไตล์จากบล็อก "style" ภายในแท็ก "head" ของ html ไปยังไฟล์ภายนอกการจัดแต่งทรงผมทั้งหมดก็หายไปโดยเหลือเพียงหน้า html ใครเห็นข้อผิดพลาดเกี่ยวกับโครงสร้างไฟล์ของฉัน

Question 2

คุณต้องมีการตั้งค่าโฟลเดอร์ 'คงที่' (สำหรับไฟล์ css / js) เว้นแต่คุณจะแทนที่โดยเฉพาะในระหว่างการเริ่มต้นขวด ฉันถือว่าคุณไม่ได้ลบล้างมัน

โครงสร้างไดเร็กทอรีของคุณสำหรับ css ควรเป็นดังนี้:

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

สังเกตว่าไดเร็กทอรี / styles ของคุณควรอยู่ภายใต้ / static

จากนั้นทำสิ่งนี้

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

Flask จะมองหาไฟล์ css ภายใต้ static / styles / mainpage.css

Question 3

ในเทมเพลต jinja2 (ซึ่งใช้ขวด) ให้ใช้

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

staticไฟล์มักจะอยู่ในstaticโฟลเดอร์แม้ว่าเว้นแต่กำหนดค่าอย่างอื่น

Question 4

ฉันได้อ่านหลายกระทู้และไม่มีเลยที่แก้ไขปัญหาที่ผู้คนกำลังอธิบายและฉันก็ประสบเช่นกัน

ฉันได้พยายามที่จะย้ายออกจาก conda และใช้ pip เพื่ออัปเกรดเป็น python 3.7 ฉันได้ลองเข้ารหัสทั้งหมดที่เสนอแล้วและไม่มีการแก้ไขเลย

และนี่คือสาเหตุ (ปัญหา):

โดยค่าเริ่มต้น python / flask ค้นหาแบบคงที่และเทมเพลตในโครงสร้างโฟลเดอร์เช่น:

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

คุณสามารถตรวจสอบได้ด้วยตัวเองโดยใช้ดีบักเกอร์บน Pycharm (หรืออย่างอื่น) และตรวจสอบค่าในแอป (app = Flask ( name )) และค้นหา teamplate_folder และ 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

คุณสามารถเปลี่ยนเทมเพลตและโฟลเดอร์แบบคงที่ได้ตามที่คุณต้องการและลงทะเบียนในแอพ = Flask ...

ในความจริงฉันเริ่มประสบปัญหาเมื่อยุ่งกับโฟลเดอร์และบางครั้งก็ใช้งานไม่ได้ วิธีนี้ช่วยแก้ปัญหาได้ทุกครั้ง

โค้ด html มีลักษณะดังนี้:

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

นี่คือรหัส

นี่คือโครงสร้างของโฟลเดอร์

Question 5

ยังคงประสบปัญหาหลังจากทำตามแนวทางแก้ไขที่ codegeek ให้มา:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

ในGoogle Chromeการกดปุ่มโหลดซ้ำ (F5) จะไม่โหลดไฟล์คงที่ซ้ำ หากคุณทำตามวิธีแก้ปัญหาที่ยอมรับแล้วแต่ยังไม่เห็นการเปลี่ยนแปลงที่คุณทำกับ CSS ให้กดctrl + shift + Rเพื่อละเว้นไฟล์แคชและโหลดไฟล์คงที่ซ้ำ

ในFirefoxการกดปุ่ม reload จะปรากฏขึ้นเพื่อโหลดไฟล์คงที่

ในEdgeการกดปุ่มรีเฟรชจะไม่โหลดไฟล์คงที่ซ้ำ การกดctrl + shift + Rควรละเว้นไฟล์แคชและโหลดไฟล์คงที่ซ้ำ อย่างไรก็ตามสิ่งนี้ใช้ไม่ได้กับคอมพิวเตอร์ของฉัน

Question 6

ตอนนี้ฉันใช้ขวดเวอร์ชัน 1.0.2 โครงสร้างไฟล์ด้านบนไม่ได้ผลสำหรับฉัน แต่ฉันพบโครงสร้างไฟล์ที่ทำได้ซึ่งมีดังนี้:

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

(โปรดทราบว่า 'คงที่' และ 'แม่แบบ' เป็นโฟลเดอร์ซึ่งควรตั้งชื่อเหมือนกันทุกประการ)

ในการตรวจสอบว่าคุณใช้ขวดเวอร์ชันใดอยู่คุณควรเปิด Python ในเทอร์มินัลและพิมพ์ดังต่อไปนี้:

นำเข้ากระติกน้ำ

กระติกน้ำ - รุ่น

Question 7

โครงสร้างโครงการขวดแตกต่างกัน ดังที่คุณได้กล่าวไว้ในคำถามโครงสร้างโปรเจ็กต์เหมือนกัน แต่ปัญหาเดียวคือโฟลเดอร์สไตล์ โฟลเดอร์ Styles ต้องอยู่ในโฟลเดอร์แบบคงที่

static/styles/style.css

Question 8

อีกหนึ่งประเด็นที่จะเพิ่มในเธรดนี้

หากคุณเพิ่มขีดล่างในชื่อไฟล์. css ของคุณก็จะใช้ไม่ได้

Question 9

อีกหนึ่งประเด็นที่จะเพิ่มนอกเหนือจากคำตอบที่ได้รับการโหวตด้านบนแล้วโปรดตรวจสอบว่าได้เพิ่มบรรทัดด้านล่างลงในapp.pyไฟล์แล้ว:

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

มิฉะนั้นขวดจะไม่สามารถตรวจจับโฟลเดอร์คงที่ได้

Question 10

หากวิธีการใด ๆ ข้างต้นไม่ได้ผลและรหัสของคุณสมบูรณ์แล้วให้ลองรีเฟรชโดยกด Ctrl + F5 มันจะล้าง Chaces ทั้งหมดแล้วโหลดไฟล์ใหม่ มันได้ผลสำหรับฉัน

Question 11

ฉันค่อนข้างแน่ใจว่ามันคล้ายกับเทมเพลต Laravel นี่คือวิธีที่ฉันทำของฉัน

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

อ้างถึง: ปัญหาการพา ธ ไฟล์ CSS

แอปพลิเคชั่นกระติกน้ำธรรมดาที่อ่านเนื้อหาจากไฟล์. html สไตล์ชีตภายนอกถูกบล็อก?