[Django] SCSS/SASS 사용하는 방법

[Django] SCSS/SASS 사용하는 방법

---

1. 관련 패키지 설치

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

2. settings.py에 설정 추가

   # settings.py
   INSTALLED_APPS = [
    ...
    'sass_processor',
    ...
   ]
   SASS_ROOT = os.path.join(BASE_DIR, 'static')
   SASS_PROCESSOR_ENABLED = True
   SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
   SASS_OUTPUT_STYLE = 'compact'
   STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
   )

• SASS_PROCESSOR_ROOT
  • 생성될 css 파일 위치 설정
  • 디폴트: STATIC_ROOT
• SASS_OUTPUT_STYLE
  • 코드 스타일 선택
  • compact, compressed, expanded, nested
  • 디폴트: debug모드일 때는 nested, 프로덕션(production)모드일 때는 compressed

 

3. HTML에 태그 추가
   Django templates에 sass_tags 태그를 추가.
   scss파일의 경로를 입력할 때 static이 아닌 sass_src를 사용.

   {% load sass_tags %}
   <link href="{% sass_src 'myapp/css/mystyle.scss' %}" rel="stylesheet" type="text/css" />

 

 

---

[참고] django-sass-processor