Static 파일이란?

: 이미지나 CSS, JS 파일 처럼 내용이 고정되어 있어, 응답을 할 때 별도의 처리 없이 파일 그대로를 보내주면 되는 파일들

Django 에서는 이미지파일이나 업로드한 파일들은 MEDIA로 따로 분류하고, CSS 파일이나 JS 파일 등의 소스 파일들을 STATIC 으로 분류한다

Document : https://docs.djangoproject.com/en/2.0/howto/static-files/

Static 경로 설정

먼저 django.contrib.staticfiles 를 INSTALLED_APPS 에 포함시켜야한다
( django 디폴트로 포함되어 있었다)

settings.py

...
INSTALLED_APPS = [
    'garden.apps.GardenConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles' # This!
]
...

이 앱을 사용해서 static 파일을 관리할 것이다

그리고 아래에 보면 STATIC_URL 이 선언되어 있는데, 이건 static 파일을 불러올 때의 URL이다

settings.py

...
STATIC_URL = '/static/'

http://127.0.0.1:8000/static/style.css
뭐 이런식으로 style.css 파일을 불러올 수 있다

이제 static 파일의 담겨있는 폴더의 경로를 설정해줘야한다
settings.py

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"), # Root의 static 파일
    '/garden/static/',    # garden App의 static 파일
)

요청한 static 파일을 위에 설정한 경로 순서대로 찾게된다

불러오기

현재 /static 으로 불러오면 /garden/static 폴더를 찾아볼 것이다.

여기서 namespace로 불러오기 위해서 /garden/static폴더 안에 garden 폴더를 하나 더 만들고, 그 안에서 static 파일을 불러올 것이다

garden/static/garden/style.css

body {
  background-color: red;
}

static 파일은 작성했고, 이제 Django 템플릿에서 불러보자

template.html

<html>
  <head>
    <title>Static 테스트</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'garden/style.css' %}">
  </head>

이렇게 static 앱을 load 하고 불러오면 된다

SASS

나는 개인적으로 CSS 프리프로세서 중에 SCSS 를 좋아하기 때문에 SASS를 사용하도록 설정해야겠다

Django에서 SASS를 컴파일 하는 플러그인으로 django-sass-processor 를 사용하겠다

Document : https://github.com/jrief/django-sass-processor

설치

pip install libsass django-compressor django-sass-processor

django-compressor : manage.py compilescss 명령어로 컴파일할 때 사용
libsass : 자세하게 설명은 없지만 아마 자동으로 연결해주는 역할인거 같다

settings 설정

설정 방법엔 두가지가 있지만 나는 수정하기쉽게 settings.py에 설정하겠다

settings.py

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

SASS_PROCESSOR_ENABLED : SASS_PROCESSOR_ROOT 경로로 컴파일된 파일이 저장되게 한다
SASS_PROCESSOR_ROOT : SCSS 파일 위치
SASS_OUTPUT_STYLE : 컴파일 코딩 스타일 (compact, compressed, expanded, nested)

실행

garden/static/garden/style.scss

body{
  background-color:red;
  main{
    font-size:30px;
  }
}

이제 위의 경로의 SCSS 파일을 불러와서 컴파일 하겠다

template.html

<head>
{% load sass_tags %}
    <link rel="stylesheet" href="{% sass_src 'garden/style.scss' %}">
</head>

위처럼 작성하면 아래로 랜더링된다

<head>
{% load sass_tags %}
    <link rel="stylesheet" href="/static/garden/style.css">
</head>

이제 웹사이트를 꾸며보자!!😆