Django-Bower + Foundation 5 + SASS,如何配置？

我正在使用Django-Bower测试基础5的SASS实现.我对Bower的想法不熟悉,并且对于如何使这个设置正常工作有点困惑.

我安装了django-bower并配置为正常运行.在我为bower apps config添加基础并运行后,manage.py bower_install我可以看到基础文件确实已经正确安装.我也可以使用静态标记将JS加载到模板中而没有问题,所以我觉得我差不多就在那里.

我的问题是如何实际使用我自定义SASS文件安装的基础文件,以及将这些SASS文件编译成CSS的最佳方法.我知道我应该能够将基础包含到我的SASS中@include "foundation"但是我已经迷失了如何让SASS文件"看到"组件/ bower_components/foundation/sass中的基础文件以及如何设置编译将css放入正确的静态文件中.

更新:PyCharm有一个选项来观看sass文件并编译它们,所以我现在有一个编译文件的选项,但是当我尝试导入基础时我得到了 error blog3.sass (Line 1: File to import not found or unreadable: foundation.

作为参考,这是我的文件结构:

??? 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

这是我的settings.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',
)

grigno.. 17

解决方案没有PYCHARM WATCHER

不使用pycharm观察者.

django-compressor编译scss文件,包括指南针.

Django的亭子

这是使用django-compressor的"如何编译scss文件"的示例:

APPNAME /静态/ 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 %}


    {% compress css %}
        
    {% endcompress %}

希望这对你有所帮助.

编辑

也许这是一个更好的配置,使用没有亲戚路径的@import. -IARG:

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

现在app.scss:

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

使用PYCHARM WATCHER

最近我很欣赏pycharm观察者

安装django-bower

从pycharm首选项添加SCSS Watcher

在观察者的编辑中,进入'参数'字段我设置:

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

所以,在scss文件中:

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

carlitux.. 7

包:

Django的管道

Django的亭子

如何用django-pipeline编译:

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

然后在模板中:

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

这将在developpemnt上编译,而collectstatic将编译和压缩