Django Bootstrap4 도입부터 Sass (SCSS) 도입까지
소개
세 기사로 구성
Bootstrap 소개
아래 URL에서 Bootstrap을 다운로드합니다.
htps : // 게이 t보오 tst et al p. 이 m/도 cs/4.1/갓찐 g-s r d d/도 w 응 아 d/
다운로드한 파일 배치
static 폴더 만들기
mkdir static다운로드한 Bootstrap4의 파일 구성은 다음과 같습니다.
bootstrap-4
├── css
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
bootstrap의 css · js에서 만든 정적 디렉토리에 배치
static
├── css
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js
├── bootstrap.min.js
└── bootstrap.min.js.map
settings.py 수정
settings.py
.
.
.
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
HTML 편집
templates/base.html
{% load i18n static %}
{% load staticfiles %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<title>{% block title %}SampleProject{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{{ content }}
{% endblock %}
</div>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}">
</script>
</body>
</html>
bootstrap 스타일이 적용되었습니다.
SASS 도입
터미널에서 다음 명령을 실행합니다.
pip install libsass django-compressor django-sass-processor설치됨
settings.py 수정
settings.py
.
.
.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'sass_processor', ←追加
'sampleapp',
]
.
.
.
# Sass/SCSS
SASS_PROCESSOR_AUTO_INCLUDE = False
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.scss$'
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = 'compact'
SASS_TEMPLATE_EXTS = ['.html', '.haml']
SASS 파일 만들기
touch static/css/style.sass방금 만든 SASS를 로드합니다.
templates/base.html
{% load i18n static %}
{% load staticfiles %}
{% load sass_tags %} ←追加
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% sass_src 'css/style.sass' %}" type="text/css"> ←追加
<title>{% block title %}SampleProject{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{{ content }}
{% endblock %}
</div>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
마지막으로
SASS를 편집하여 동작 확인
static/css/style.sass
body
color: green;
참고 기사
Reference
이 문제에 관하여(Django Bootstrap4 도입부터 Sass (SCSS) 도입까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k-shinto/items/c967c1e677bfe02f92b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
