人生シーケンスブレイク

人生を楽してクリアしたい。当面はPython学習帳

Django 2.x で Sass / SCSS を使う

Django記事シリーズ

の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

各ライブラリは、

となっている。

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_APPSsass_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. f:id:ShineSpark:20180323201450p:plain

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

みんなのPython 第4版

みんなのPython 第4版