Django Bootstrap4の導入からSass(SCSS)導入まで

## はじめに
3つの記事で構成しています

1. [Djangoをセットアップする](https://qiita.com/k-shinto/items/1c3b77cd94e2c35faf1d)
- [共通のテンプレートから呼び出す](https://qiita.com/k-shinto/items/6859e7dd1154bec168db)
- （この記事）

## 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>
```
![スクリーンショット 2018-09-11 9.35.57.png](https://qiita-image-store.s3.amazonaws.com/0/222146/8a19e9aa-d392-3571-af03-2e09c7c3c2f6.png)
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']
```

- https://github.com/jrief/django-sass-processor

##### 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;
```

![スクリーンショット 2018-09-11 11.08.20.png](https://qiita-image-store.s3.amazonaws.com/0/222146/b8f62aa4-0f51-b5ca-d926-c066b894f6da.png)


## 参考記事

- https://medium.com/@theblackcat102/make-django-great-again-part-3-sass-compiler-8c6a15b72630
- https://shinespark.hatenablog.com/entry/2018/03/24/090000