css django sass zurb-foundation bower

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



zurb-foundation (2)

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'', )

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";

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á