.css 파일 (flask / python)을 선택하지 않는 애플리케이션

외부 스타일 시트로 스타일을 지정하려는 템플릿을 렌더링하고 있습니다. 파일 구조는 다음과 같습니다.

/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의 "head"태그 내의 "style"블록에서 외부 파일로 스타일링 코드를 이동하려고하면 모든 스타일링이 사라지고 html 페이지 만 남았습니다. 누구든지 내 파일 구조에 오류가 있습니까?

Flask 초기화 중에 특별히 재정의하지 않는 한 '정적'폴더 설정 (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는 이제 static / styles / mainpage.css에서 css 파일을 찾습니다.

jinja2 템플릿 (플라스크가 사용하는)에서

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

static파일은 보통입니다 static다르게 구성하지 않는 한,하지만, 폴더.

나는 여러 스레드를 읽었지만 사람들이 설명하는 문제를 해결하지 못했으며 나도 경험했습니다.

나는 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" >

이 코드

여기에 폴더 구조

codegeek에서 제공 한 솔루션을 따른 후에도 여전히 문제가 있습니다
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">.

에서 구글 크롬 정적 파일을 다시로드하지 않습니다 다시로드 버튼 (F5)을 눌러. 수락 된 솔루션을 따랐지만 여전히 CSS에 대한 변경 사항이 표시되지 않는 경우를 눌러 ctrl + shift + R캐시 된 파일을 무시하고 정적 파일을 다시로드합니다.

에서 파이어 폭스가 다시로드 버튼을 눌러 정적 파일을 다시로드 나타납니다.

에서 에지 정적 파일을 다시로드하지 않고 새로 고침 버튼을 누르면. 를 누르면 ctrl + shift + R캐시 된 파일을 무시하고 정적 파일을 다시로드합니다. 그러나 이것은 내 컴퓨터에서 작동하지 않습니다.

지금 플라스크 1.0.2 버전을 실행하고 있습니다. 위의 파일 구조는 나를 위해 작동하지 않았지만 다음과 같이 작동하는 것을 찾았습니다.

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

( '정적'과 '템플릿'은 정확히 같은 이름을 지정해야하는 폴더입니다.)

실행중인 플라스크의 버전을 확인하려면 터미널에서 Python을 열고 그에 따라 다음을 입력해야합니다.

수입 플라스크

플라스크-버전

플라스크 프로젝트 구조가 다릅니다. 질문에서 언급했듯이 프로젝트 구조는 동일하지만 유일한 문제는 스타일 폴더입니다. Styles 폴더는 정적 폴더 내에 있어야합니다.

static/styles/style.css

이 스레드에 추가 할 점이 하나 더 있습니다.

.css 파일 이름에 밑줄을 추가하면 작동하지 않습니다.

추가 할 점이 하나 더 있습니다. 위의 찬성 답변과 함께 아래 줄이 app.py파일에 추가되었는지 확인하세요 .

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

그렇지 않으면 플라스크가 정적 폴더를 감지 할 수 없습니다.

위의 방법 중 하나가 작동하지 않고 코드가 완벽하다면 Ctrl + F5를 눌러 하드 새로 고침을 시도하십시오. 모든 체이스를 지우고 파일을 다시로드합니다. 그것은 나를 위해 일했습니다.

나는 그것이 Laravel 템플릿과 비슷하다고 확신합니다. 이것이 내가 한 방법입니다.

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

참조 : CSS 파일 경로 지정 문제

.html 파일에서 내용을 읽는 간단한 플라스크 응용 프로그램입니다. 외부 스타일 시트가 차단됩니까?