css - Django-Bower+Foundation 5+SASS, ¿Cómo configurar?

zurb-foundation

Question

Estoy en el proceso de probar una implementación SASS de Foundation 5 usando Django-Bower. Soy nuevo en la idea de Bower y tengo un poco de confusión sobre cómo hacer que esta configuración funcione correctamente.

Tengo django-bower instalado y configurado para funcionar correctamente. Después de agregar manage.py bower_install a la configuración de aplicaciones de Bower y ejecutar manage.py bower_install puedo ver que los archivos de manage.py bower_install se han instalado correctamente. También puedo usar la etiqueta estática para cargar el JS en una plantilla sin problemas, por lo que siento que estoy a mitad de camino.

Mi problema es en cuanto a cómo usar realmente los archivos de base que Bower instaló con mis archivos SASS personalizados, y la mejor manera de compilar esos archivos SASS en CSS. Sé que se supone que debo incluir Foundation en mi SASS con @include "foundation" pero no entiendo cómo hacer que el archivo SASS "vea" los archivos de base en components / bower_components / foundation / sass y cómo configurar una compilación para colocar el css en el archivo estático correcto.

ACTUALIZACIÓN: PyCharm tiene una opción para ver archivos sass y compilarlos, así que ahora tengo una opción para compilar los archivos, pero cuando intento importar la base, obtengo el error blog3.sass (Line 1: File to import not found or unreadable: foundation.

Para referencia, aquí está mi estructura de archivos:

├── blog3
│   └── __pycache__
├── components
│   └── bower_components
│       ├── foundation
│       │   ├── css
│       │   ├── js
│       │   │   ├── foundation
│       │   │   └── vendor
│       │   └── scss
│       │       └── foundation
│       │           └── components
│       ├── jquery
│       └── modernizr
│           ├── feature-detects
│           ├── media
│           └── test
│               ├── caniuse_files
│               ├── js
│               │   └── lib
│               └── qunit
└── interface
    ├── migrations
    │   └── __pycache__
    ├── __pycache__
    ├── sass
    └── templates
        └── interface

Esta es mi configuración.py

"""
Django settings for blog3 project.

For more information on this file, see
https://docs.djangoproject.com/en/dev/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/dev/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__)) 


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/dev/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = ''...''

# SECURITY WARNING: don''t run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    ''django.contrib.admin'',
    ''django.contrib.auth'',
    ''django.contrib.contenttypes'',
    ''django.contrib.sessions'',
    ''django.contrib.messages'',
    ''django.contrib.staticfiles'',
    ''annoying'',
    ''django_extensions'',
    ''djangobower'',
    ''interface'',

)

MIDDLEWARE_CLASSES = (
    ''django.contrib.sessions.middleware.SessionMiddleware'',
    ''django.middleware.common.CommonMiddleware'',
    ''django.middleware.csrf.CsrfViewMiddleware'',
    ''django.contrib.auth.middleware.AuthenticationMiddleware'',
    ''django.contrib.messages.middleware.MessageMiddleware'',
    ''django.middleware.clickjacking.XFrameOptionsMiddleware'',
)

ROOT_URLCONF = ''blog3.urls''

WSGI_APPLICATION = ''blog3.wsgi.application''


# Database
# https://docs.djangoproject.com/en/dev/ref/settings/#databases

DATABASES = {
    ''default'': {
        ''ENGINE'': ''django.db.backends.sqlite3'',
        ''NAME'': os.path.join(BASE_DIR, ''db.sqlite3''),
    }
}

# Internationalization
# https://docs.djangoproject.com/en/dev/topics/i18n/

LANGUAGE_CODE = ''en-us''

TIME_ZONE = ''UTC''

USE_I18N = True

USE_L10N = True

USE_TZ = True  


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/dev/howto/static-files/

STATIC_URL = ''/static/''
STATICFILES_FINDERS = (
    ''djangobower.finders.BowerFinder'',
)

BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, "components")
BOWER_INSTALLED_APPS = (
    ''jquery'',
    ''foundation'',
)

Answer 1

SOLUCIÓN SIN RELOJ DE PICARMAS

1. No se utiliza pycharm watcher.
2. django-compressor para compilar archivos scss incluyendo compass .
3. Django-Bower

Este es un ejemplo de "cómo compilar archivos scss" con django-compressor:

appName / static / scss / app.scss:

@import "../../../components/bower_components/foundation/scss/foundation";
@import "compass";

/* other stuff*/

settings.py:

STATICFILES_FINDERS = (
    .....
    ''compressor.finders.CompressorFinder'',

)

COMPRESS_PRECOMPILERS = (
    (''text/x-sass'', ''sass --compass "{infile}" "{outfile}"''),
    (''text/x-scss'', ''sass --scss --compass "{infile}" "{outfile}"''),
)

COMPRESS_URL = ''/static/''

template.html:

{% load static %}
{% load compress %}

<head>
    {% compress css %}
        <link href="{% static ''scss/app.scss'' %}" media="screen, projection" rel="stylesheet" type="text/x-scss" />
    {% endcompress %}

</head>

Espero que esto te ayude.

EDITAR

Tal vez esta es una mejor configuración para usar @import sin parientes. -I sostengo:

PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
BOWER_COMPONENTS_ROOT = os.path.join(PROJECT_PATH, "../components/")
COMPRESS_PRECOMPILERS = (
        (''text/x-sass'', ''sass --compass "{infile}" "{outfile}"''),
        (''text/x-scss'', ''sass --scss --compass -I "%s/bower_components/foundation/scss" "{infile}" "{outfile}"'' % BOWER_COMPONENTS_ROOT),
    )

Ahora app.scss:

@import "foundation";
@import "compass";

UTILIZANDO EL RELOJ DE PICO

Últimamente estoy apreciando pycharm watcher

1. Instalar django-bower
2. Agregar un observador SCSS desde las preferencias de pycharm

3. En la edición del observador, en el campo ''Argumentos'', establezco:

   --compass -I "/ $ ProjectFileDir $ / components / bower_components / foundation / scss" --no-cache --update $ FileName $: $ FileNameWithoutExtension $ .css

Así, en el archivo scss:

@import "foundation";
@import "compass";

Answer 2

paquetes:

1. Django-tubería
2. Django-Bower

Cómo compilar con django-pipeline:

aplicación.scss:

@import "../../../components/bower_components/foundation/scss/foundation";

settings.py:

INSTALLED_APPS = (
    ''django.contrib.admin'',
    ''django.contrib.auth'',
    ''django.contrib.contenttypes'',
    ''django.contrib.sessions'',
    ''django.contrib.messages'',
    ''django.contrib.staticfiles'',

    ''pipeline'',
    ''djangobower'',
)

BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, ''components'')

STATICFILES_FINDERS = (
    .....
    ''djangobower.finders.BowerFinder'',  # just for bower components

)

PIPELINE_CSS = {
    ''application'': {
        ''source_filenames'': (
            ''css/application.scss'',
        ),
        ''output_filename'': ''css/application.css'',
        ''extra_context'': {
            ''media'': ''screen,projection'',
        },
    },
}

PIPELINE_COMPILERS = (
    ''pipeline.compilers.sass.SASSCompiler'',
)

Luego en plantilla:

{% load compressed %}
{% compressed_css ''application'' %}

Esto compilará en el desarrollo y en collectstatic compilará y comprimirá