はじめに
3つの記事で構成しています
- 共通のテンプレートから呼び出す
- （この記事）
Bootstrapの導入
下記URLからBootstrapをダウンロードします
https://getbootstrap.com/docs/4.1/getting-started/download/
ダウンロードしたファイルを配置する
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ディレクトリに配置
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
- 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;
