DjangoでSCSSを使ってみる

django-sass-processorというパッケージを使うっぽい。

django-sass-processorをインストールする

pip install libsass django-compressor django-sass-processor

django-sass-processorのページでこれを実行するように書いたあったので、
libsassとdjango-compressorも必要みたい。

SCSSを使う設定

settings.py INSTALLED_APPSにsass_processorを追加する

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

STATICFILES_FINDERSを追加する

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]

CSSはSTATIC_ROOTに出力されますがSASS_PROCESSOR_ROOTで指定することもできる
出力をmin化する場合は、SASS_OUTPUT_STYLE = 'compressed'をつける

SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_OUTPUT_STYLE = 'compressed'

SCSSを使う

先頭でロードして

{% load sass_tags %}

cssみたいに読み込む

<link rel="stylesheet" href="{% sass_src 'css/hoge.scss' %}" />

SCSSをコンパイルする

自動コンパイル

SASS_PROCESSOR_ENABLED = True

開発段階では、SASS_PROCESSOR_ENABLEDをTrueにしとくと自動でコンパイルされます

コンパイルする

python manage.py compilescss

本番環境では、SASS_PROCESSOR_ENABLEDをFalseにして、
python manage.py compilescssをすると
SASS_PROCESSOR_ROOTない場合はSTATIC_ROOTにコンパイルされます。

Staticファイルを移動する

Djangoではstaticファイルはまとめて、公開フォルダに置いとく感じにするので、collectstaticであつめます

python manage.py collectstatic

https://pypi.org/project/django-sass-processor/