【Django】フロントエンド向けライブラリについて（Sass processor, widget tweaks）
デフォルトのDjangoのフロントエンドを実装する際、Sass(SCSS)使用、Djangoテンプレート変数のフォーム（{{ form }}）の細かなスタイルングが出来ず、色々調べました。
ライブラリーおかげで上記の問題が解決できたので、使用したライブラリーをまとめてみました。
1. Sass processor
Sass processorはSass(SCSS)をコンパイルする為のライブラリーです。CSSを使うならSassとしてコーディングする方がメリットがあるので、必要となると思います。（rails, lalavelでは標準であるみたいです。）
①ライブラリのインストール
pip install libsass django-compressor django-sass-processor
②setting.pyに追加
③テンプレートファイル(base.htmlなどがベター)に読み込みのためのコードを記述
base.html
<!doctype html>
{% load static %}
{% load sass_tags %}
<html lang="ja">
<head>
...
...
以上でCSSと同じようにSass・SCSSを使えるようになります。
2.widget tweaks
widget tweaksはテンプレートファイルで使う{{ from }}にclass属性を付与し、CSSなどでスタイリングしたり、textareaのcolsやrowの設定を簡単にしたりします。
①ライブラリのインストール
pip install django-widget-tweaks
②setting.pyに追加
③テンプレートファイルに読み込みのためのコードを記述
base.html
{% load widget_tweaks %}
使用例
....
<form method='POST' role="form" action="" class="post-form">
{% csrf_token %}
<div>{{ form.title|add_class:'クラス名' }}</div> *htmlのタグにクラス名を付与
<div>{{ form.memo|attr:"cols:100"|attr:"rows:3" }}</div> *textareaのcols,rowsの指定
<div class="form-bottom">
<button type="submit" class="btn btn-primary">メモ投稿!</button>
</div>
</form>
...
class属性を指定できることでフィールドごとの細かなスタイリングやbootstrapなども活用できるので、使い勝手が良いと思います。
