DjangoでSCSSを使ってみる

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

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

pip install libsass django-compressor django-sass-processor

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

SCSSを使う設定

settings.py INSTALLED_APPSsass_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' %}" />

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です