Ứng dụng không tải tệp .css (flask / python)

112

Tôi đang kết xuất một mẫu mà tôi đang cố gắng tạo kiểu bằng một biểu định kiểu bên ngoài. Cấu trúc tệp như sau.

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

mainpage.html trông giống như thế này

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

Không có phong cách nào của tôi đang được áp dụng. Nó có liên quan gì đến thực tế là html là một mẫu mà tôi đang hiển thị không? Con trăn trông như thế này.

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

Tôi biết nhiều điều này đang hoạt động, bởi vì tôi vẫn có thể kết xuất mẫu. Tuy nhiên, khi tôi cố gắng di chuyển mã tạo kiểu của mình từ khối "style" trong thẻ "head" của html sang một tệp bên ngoài, tất cả kiểu đã biến mất, để lại một trang html trống rỗng. Có ai thấy bất kỳ lỗi nào với cấu trúc tệp của tôi không?

— Zack
nguồn

224

Bạn cần thiết lập thư mục 'tĩnh' (đối với tệp css / js) trừ khi bạn ghi đè cụ thể nó trong quá trình khởi tạo Flask. Tôi cho rằng bạn đã không ghi đè nó.

Cấu trúc thư mục của bạn cho css sẽ như sau:

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

Lưu ý rằng thư mục / styles của bạn phải nằm trong / static

Sau đó, làm điều này

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

Flask bây giờ sẽ tìm kiếm tệp css trong static / styles / mainpage.css

— codegeek
nguồn

4

Điều này sẽ được gắn cờ là câu trả lời. Giải pháp này phù hợp với tôi, nếu không phù hợp với bạn, vui lòng cho chúng tôi biết để giúp đỡ. Nếu không, hãy gắn cờ nó. @zack

— Shahryar Saljoughi

2

Tại sao điều này không được đánh dấu là câu trả lời đúng? Nó nên được.

— pfabri 23/02/19

1

Xin lỗi, quên để trở lại với trang này :) folder tĩnh chắc chắn là con đường để đi

— Zack

cho Javascript, thêm tệp script vào thư mục tĩnh . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— HAr

17

Trong các mẫu jinja2 (bình sử dụng), hãy sử dụng

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

Tuy nhiên, staticcác tệp thường nằm trong staticthư mục, trừ khi được định cấu hình khác.

— njzk2
nguồn

1

Điều này mang lại cho tôi một lỗi không may. BuildError: ('mainpage.css', {}, None)

— Zack

6

Tôi đã đọc nhiều chủ đề và không có chủ đề nào khắc phục được sự cố mà mọi người đang mô tả và tôi cũng đã gặp phải.

Tôi thậm chí đã cố gắng di chuyển khỏi conda và sử dụng pip, để nâng cấp lên python 3.7, tôi đã thử tất cả các mã được đề xuất và không có cái nào được sửa.

Và đây là lý do tại sao (vấn đề):

theo mặc định python / flask tìm kiếm tĩnh và mẫu trong cấu trúc thư mục như:

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

bạn có thể tự mình xác minh bằng trình gỡ lỗi trên Pycharm (hoặc bất kỳ thứ gì khác) và kiểm tra các giá trị trên ứng dụng (app = Flask ( tên )) và tìm kiếm teamplate_folder và static_folder

Để khắc phục điều này, bạn phải chỉ định các giá trị khi tạo ứng dụng như sau:

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)

đường dẫn TEMPLATE_DIR và STATIC_DIR phụ thuộc vào vị trí của ứng dụng tệp. trong trường hợp của tôi, hãy xem hình ảnh, nó nằm trong một thư mục dưới src.

bạn có thể thay đổi mẫu và thư mục tĩnh theo ý muốn và đăng ký trên ứng dụng = Flask ...

Trên thực tế, tôi đã bắt đầu gặp sự cố khi lộn xộn với thư mục và có lúc hoạt động có lúc không. điều này khắc phục sự cố một lần và mãi mãi

mã html trông như thế này:

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

Đây là mã

Đây là cấu trúc của các thư mục

— Stefano Tuveri
nguồn

2

Vẫn gặp sự cố sau khi làm theo giải pháp do codegeek cung cấp:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?

Trong Google Chrome, nhấn nút tải lại (F5) sẽ không tải lại các tệp tĩnh. Nếu bạn đã làm theo giải pháp được chấp nhận nhưng vẫn không thấy những thay đổi bạn đã thực hiện đối với CSS, hãy nhấnctrl + shift + R để bỏ qua các tệp được lưu trong bộ nhớ cache và tải lại các tệp tĩnh.

Trong Firefox nhấn nút tải lại sẽ xuất hiện để tải lại các tệp tĩnh.

Trong Edge, nhấn nút refresh sẽ không tải lại tệp tĩnh. Việc nhấn ctrl + shift + Rsẽ bỏ qua các tệp được lưu trong bộ nhớ cache và tải lại các tệp tĩnh. Tuy nhiên điều này không hoạt động trên máy tính của tôi.

— Christian Johansen
nguồn

Cảm ơn bạn rất nhiều, nó đã giải quyết được sự cố của tôi trong Google Chrome (Ctrl + shift + R). Có cách nào để tự động bỏ qua các tệp được lưu trong bộ nhớ cache không?

— Alexis

1

Tôi đang chạy phiên bản 1.0.2 của flask ngay bây giờ. Các cấu trúc tệp ở trên không hoạt động đối với tôi, nhưng tôi tìm thấy cấu trúc tệp đã làm được, như sau:

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

(Xin lưu ý rằng 'tĩnh' và 'mẫu' là các thư mục, nên được đặt tên giống hệt nhau.)

Để kiểm tra phiên bản flask bạn đang chạy, bạn nên mở Python trong terminal và nhập nội dung sau cho phù hợp:

nhập khẩu bình

bình - chuyển đổi

— Lý-bạch
nguồn

Xin lỗi, nhưng bạn có thể vui lòng mô tả chính xác những gì bạn đã làm không? Tôi đang đấu tranh với cùng một vấn đề!

— user3002996

0

Cấu trúc dự án bình là khác nhau. Như bạn đã đề cập trong câu hỏi, cấu trúc dự án giống nhau nhưng vấn đề duy nhất là ở thư mục styles. Thư mục kiểu phải nằm trong thư mục tĩnh.

static/styles/style.css

— Gopi P
nguồn

0

Một điểm nữa để thêm vào chủ đề này.

Nếu bạn thêm dấu gạch dưới trong tên tệp .css của mình thì nó sẽ không hoạt động.

— SW Jeong
nguồn

0

Thêm một điểm nữa. Ngoài các câu trả lời được ủng hộ ở trên, hãy đảm bảo rằng dòng dưới đây được thêm vào app.pytệp:

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

Nếu không, bình sẽ không thể phát hiện thư mục tĩnh.

— Sanjay Nandakumar
nguồn

0

Nếu bất kỳ phương pháp nào ở trên không hoạt động và mã của bạn hoàn hảo thì hãy thử làm mới bằng cách nhấn Ctrl + F5. Nó sẽ xóa tất cả các chuỗi và sau đó tải lại tệp. Nó đã làm việc cho tôi.

— Hackytech
nguồn

-8

Tôi khá chắc rằng nó giống với mẫu Laravel, đây là cách tôi đã làm.

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

Đã tham khảo: Vấn đề xử lý tệp CSS

Ứng dụng bình đơn giản đọc nội dung của nó từ tệp .html. Biểu định kiểu bên ngoài bị chặn?

— nCore
nguồn

2

Sẽ không bỏ phiếu cho bạn nhưng đối với sự chỉnh sửa của bạn, Laravel là PHP và Flask là Python. Chúng không hoạt động theo cách tương tự. Chúng có cấu trúc và hành vi thư mục rất khác nhau.

— Mr. Concolato

Để nhập các tệp tĩnh, chúng ta cần đặt các tệp tĩnh đó vào một thư mục tĩnh. Cấu trúc thư mục bạn đã cung cấp hoạt động với tệp HTML thông thường. nhưng không phải với Flask

— Gopi P