Why Isn\'t My Flask Application Recognizing My External CSS File?-CSS Tutorial-php.cn

Why Isn\'t My Flask Application Recognizing My External CSS File?

Patricia Arquette

Release： 2024-12-08 20:40:11

Original

811 people have browsed it

Why Isn't My Flask Application Recognizing My External CSS File?

CSS File Not Recognized in Flask Application: Troubleshooting File Structure

When attempting to style a template using an external CSS file in Flask, it's essential to ensure your file structure is correct. If your styles aren't applying, consider the following:

File Structure:

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

Copy after login

HTML Markup:

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

Copy after login

Issue:

Your CSS file is located outside the "static" folder, which Flask uses to serve static files such as CSS and JavaScript.

Solution:

To resolve this, move your CSS file under the "static" folder, and update your HTML file accordingly:

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

Copy after login

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

Copy after login

Explanation:

Flask looks for static files under the "static" folder, allowing you to serve CSS files without managing their file paths explicitly. By using this approach, your application will now correctly apply the styles defined in your external "mainpage.css" file.

The above is the detailed content of Why Isn\'t My Flask Application Recognizing My External CSS File?. For more information, please follow other related articles on the PHP Chinese website!