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

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

python  html  css  templates  flask 
— 잭
소스

답변:

226

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 파일을 찾습니다.

— codegeek
소스
4
답변으로 표시되어야합니다. 이 솔루션은 저에게 효과적이었습니다. 그렇지 않은 경우 도움을 요청하십시오. 그렇지 않으면 플래그를 지정하십시오. @zack
— Shahryar Saljoughi에게
2
이것이 정답으로 표시되지 않은 이유는 무엇입니까? 그것은해야한다.
— pfabri
1
죄송합니다,이 일에 돌아올 것을 잊었다 : 정적 폴더를 이동하는 방법 확실히했다
— 잭
1
Javascript의 경우 정적 폴더 에 스크립트 파일을 추가하십시오 . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>
— HAr
17

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

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

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

— njzk2
소스
1
불행히도 이것은 나에게 오류를주고 있습니다. BuildError : ( 'mainpage.css', {}, None)
— Zack
6

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

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

이 코드

여기에 폴더 구조

— 스테파노 투 베리
소스
2

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

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

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

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

— 크리스티안 요한센
소스
Google 크롬 (Ctrl + Shift + R)에서 내 문제를 해결 해주셔서 감사합니다. 캐시 된 파일을 자동으로 무시하는 방법이 있습니까?
— Alexis
1

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

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

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

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

수입 플라스크

플라스크-버전

— Ly-Bach
소스
죄송합니다. 정확히 무엇을했는지 설명해 주시겠습니까? 나는 같은 문제로 어려움을 겪고 있습니다!
— user3002996
0

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

static/styles/style.css
— 고피 P
소스
0

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

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

— 정 SW
소스
0

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

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

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

— 산 제이 난다 쿠마르
소스
0

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

— Hackytech
소스
-8

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

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

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

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

— nCore
소스
2
당신에게 투표하지 않고 당신의 교화를 위해 Laravel은 PHP이고 Flask는 Python입니다. 비슷한 방식으로 작동하지 않습니다. 디렉터리 구조와 동작이 매우 다릅니다.
— Mr.
정적 파일을 가져 오려면 해당 정적 파일을 정적 폴더에 배치해야합니다. 제공 한 폴더 구조는 일반 HTML 파일에서 작동합니다. 하지만 플라스크에
— Gopi P
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.