DjangoでSCSSを使用する方法


  1. 必要なパッケージのインストール: まず、DjangoプロジェクトにSCSSを統合するために、django-sassパッケージをインストールする必要があります。以下のコマンドを使用してインストールします:

    pip install django-sass
  2. SCSSファイルの作成: SCSSファイルを作成して、スタイルを定義します。通常、staticディレクトリ内にscssディレクトリを作成し、その中にSCSSファイルを配置します。例えば、static/scss/styles.scssというファイルを作成します。

  3. コンパイル設定の追加: Djangoの設定ファイル(settings.py)にSCSSのコンパイル設定を追加します。以下のように設定を編集します:

    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
       os.path.join(BASE_DIR, 'static'),
    ]
    SASS_PROCESSOR_ENABLED = True
    SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
    SASS_OUTPUT_STYLE = 'compact'
  4. {% load sass_tags %}
    <link rel="stylesheet" href="{% sass_src 'scss/styles.scss' %}">
  5. SCSSファイルの変更を監視: 開発中にSCSSファイルが変更された場合、自動的にコンパイルされるようにするには、以下のコマンドを実行します:

    python manage.py runserver

    サーバーが実行中の状態でSCSSファイルを変更すると、自動的にCSSファイルが再生成されます。

これで、DjangoプロジェクトでSCSSを使用する準備が整いました。SCSSを使ってスタイルシートを作成し、ウェブアプリケーションに適用してみてください。より詳細な情報については、Djangoの公式ドキュメントやdjango-sassパッケージのドキュメントを参照してください。