응용 프로그램이 .css 파일(Flask/python)을 선택하지 않음
외부 스타일 시트로 스타일링하려는 템플릿을 렌더링합니다.파일 구조는 다음과 같습니다.
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/styles
- mainpage.css
메인 페이지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 페이지만 남았습니다.내 파일 구조에 오류가 있는 사람이 있습니까?
플라스크 초기화 중에 특별히 재정의하지 않는 한 '정적' 폴더 설정(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') }}">
플라스크는 이제 static/styles/mainpage.css에서 css 파일을 찾습니다.
jinja2 템플릿(플라스크 사용)에서,
href="{{ url_for('static', filename='mainpage.css')}}"
그static 파들일으로에 .static폴더는 별도로 구성되지 않은 경우에 한합니다.
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캐시된 파일을 무시하고 정적 파일을 다시 로드해야 합니다.그러나 이것은 내 컴퓨터에서 작동하지 않습니다.
저는 여러 스레드를 읽었지만 사람들이 설명하고 있고 저도 경험한 문제를 해결한 것은 하나도 없습니다.
저는 심지어 콘다에서 벗어나 pip을 사용하려고 시도했고, 파이썬 3.7로 업그레이드하기 위해 제안된 모든 코딩을 시도했지만 수정된 코드는 없습니다.
그리고 여기 왜 (문제가):
기본적으로 python/sys는 다음과 같은 폴더 구조에서 정적 및 템플릿을 검색합니다.
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
and
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>
Pycharm(또는 기타)에서 디버거를 사용하여 직접 확인하고 앱(앱 = Flask(이름))에서 값을 확인한 후 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" >
코드에 다음을 추가합니다.
<link
rel= "stylesheet"
type= "text/css"
href= "{{ url_for('static',filename='name of css file') }}"
>
만약 당신이 위와 같이 당신의 css를 연결했지만 그것이 작동하지 않는다면 당신은 다음을 할 수 있습니다:-
- 크롬 =>
ctrl + shift + R- 가장자리 =>
ctrl + shift + R- Firefox =>
ctrl + shift + R
한 가지 더 추가해야 할 점이 있습니다.위의 업데이트된 답변과 함께 아래 행이 다음에 추가되었는지 확인하십시오.app.py파일 이름:
app = Flask(__name__, static_folder="your path to static")
그렇지 않으면 플라스크가 정적 폴더를 탐지할 수 없습니다.
위의 방법 중 하나라도 작동하지 않고 코드가 완벽하다면 윈도우 및 Mac용(Cmd 및 Shift를 누른 상태에서 R [명령 + Shift + R ]을 눌러 하드 리프레시를 시도합니다.모든 캐시를 지우고 파일을 다시 로드합니다.그것은 나에게 효과가 있었다.
지금 플라스크 1.0.2 버전을 실행하고 있습니다.위의 파일 구조는 저에게 적합하지 않았지만, 다음과 같은 하나를 찾았습니다.
app_folder/ flask_app.py/ static/ style.css/ templates/
index.html
('static'과 'templates'는 폴더이며 이름은 정확히 같아야 합니다.)
실행 중인 플라스크 버전을 확인하려면 터미널에서 Python을 열고 다음을 입력해야 합니다.
수입 플라스크
플라스크 --버전
이상하게도, 내 .css 파일의 이름을 "main.css"로 지정하고 "static" 폴더를 가지고 있는 나에게는 작동합니다.예를 들어 "styles.css" 또는 "mainstyle.css"와 같은 다른 파일 이름이 있는 경우 스타일은 렌더링할 때 페이지에 반영되지 않습니다.
플라스크 프로젝트 구조가 다릅니다.문제의 말씀처럼 프로젝트 구조는 동일하지만 유일한 문제는 styles 폴더입니다.스타일 폴더는 정적 폴더 안에 있어야 합니다.
static/styles/style.css
이 스레드에 추가할 포인트가 하나 더 있습니다.
.css 파일 이름에 밑줄을 추가하면 작동하지 않습니다.
플라스크 내에서 Blueprint를 사용할 때 html과 css를 연결하려면:
템플릿 및 정적 폴더 세트가 있는지 확인합니다. core = Blueprint('core', name, template_folder='folder', static_folder='static')
href 코드에 url_for를 추가합니다.
라라벨 템플릿과 비슷할 거라고 확신해요, 이렇게 했어요.
<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />
.html 파일에서 내용을 읽는 간단한 플라스크 응용프로그램입니다.외부 스타일 시트가 막혔습니까?
언급URL : https://stackoverflow.com/questions/22259847/application-not-picking-up-css-file-flask-python
'sourcecode' 카테고리의 다른 글
| Express + MongoDB를 위한 최고의 세션 스토리지 미들웨어 (0) | 2023.06.23 |
|---|---|
| Git: 기본 저장소에서 Active Branch를 변경하는 올바른 방법은 무엇입니까? (0) | 2023.06.23 |
| MongoDB에서 인덱스로 정렬하는 방법은 무엇입니까? (0) | 2023.06.23 |
| git 얕은 클론(clone --depth)으로 원격 분기 누락 (0) | 2023.06.23 |
| Postgres에 대한 pgcrypto의 pgkey_encrypt에 해당하는 MariaDB가 있습니까? (0) | 2023.06.23 |