Django 2.x で Sass / SCSS を使う

Django記事シリーズ

• Django 2.x で Haml ライクなテンプレートを使う - 人生シーケンスブレイク
• Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク
• Django 2.x で Sass / SCSS を使う - 人生シーケンスブレイク
• Django 2.x で Rails みたいに jquery-ujs を使って二重submit抑止やconfirmをカンタンに実装する - 人生シーケンスブレイク

の3つ目。

• Python 3.6.4
• Django 2.0.3

で Sass / SCSS を使えるようにする。

以降のコードでは、 Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク まで実施したので Hamlpy や Bootstrap 導入済みだが別に無くてもOK。

必要なライブラリをインストールする

まず、 GitHub - jrief/django-sass-processor: SASS processor to compile SCSS files into *.css, while rendering, or offline. を参考にインストールを行う。

$ pip install libsass django-compressor django-sass-processor

# requirements.txt も更新しとく
$ pip freeze > ./requirements.txt

各ライブラリは、

• django-sass-processor
  • SASSプロセッサ本体
• django-compressor
  • ローカルでコンパイルしたい時に必要。 manage.py compilescss することで出力できる
• libsass
  • コンパイルする時に必要なライブラリ。コンパイル済みのcssファイルをデプロイするのであれば本番環境では不要

となっている。

alpineでこれらをインストールするには以下を入れておけばよい。

FROM python:alpine

ENV RUNTIME_PACKAGES="gcc g++ musl-dev nodejs libxml2-dev libxslt-dev"
RUN apk --update add $RUNTIME_PACKAGES

hamlpy入れる為に記述したパッケージも含まれているので、Sass / SCSSだけなら musl-dev, nodejsは不要かも。

settings.py 編集

INSTALLED_APPS に sass_processor を追加する。

INSTALLED_APPS = [
    ...
    'sass_processor',
    ...
]

下記も追加する。

# Sass(SCSS)
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.(sass|scss)$'
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = 'compressed'
SASS_TEMPLATE_EXTS = ['.html', '.haml']

Bootstrapは SASS_PRECISION = 8 にしておく必要がある。

細かい設定は GitHub - jrief/django-sass-processor: SASS processor to compile SCSS files into *.css, while rendering, or offline. を参照。

Sass / SCSS 配置

先程のsettings.pyでは、 ./static をSASSのルートディレクトリにしたので、 ./static/stylesheets/style.sass にテストファイルを配置してみる。

body
  background-color: black

最近はSCSSよりSassの方が書いてて楽。

templates 編集

以下のコードはHaml

- load sass_tags

%link{ rel: 'stylesheet', type: 'text/css', href: "{% sass_src 'stylesheets/style.sass' %}" }

できた

以下のようになっていればOK.

参考として、↓のリポジトリにソースコードを公開しています。 github.com

みんなのPython 第4版