django SASS/SCSS 적용하기

회사 블로그를 하나 직접 만들기 위해서 themeforest에서 템플릿을 하나 샀는데 

css 가 모두 sass 로 작성되어 있었다. (뭔지도 몰랐음) 

대강 이게 어떤 원리고 뭐가 장점인지 왜쓰는건지 등 찾아보고 장고에 적용했다.

 

1. 설치

pip install libsass django-compressor django-sass-processor

 

2. setting.py 에 import 

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

SASS_OUTPUT_STYLE = 'compact'
SASS_PROCESSOR_ENABLED = True
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')

 

3. 템플릿에서 사용

{% load sass_tags %}

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

 

대부분 구글링하면 여기까지는 나오는데 deployment 했을때 scss 파일이 제대로 로드되지 않는 경우를 다루지 않아서 이번 포스팅을 하게 됐다.

 

4. 배포시 setting.py 

아래 내용을 setting.py 에 추가 하세요 ! 

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

 

 

내가 장고로 만든 블로그 유입

노출/유입 완전 수직 상승이다 10개 정도 썻는데!