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

我正在使用Django-Bower测试基础5的SASS实现。我是Bower的想法的新手，对于如何使设置正常工作有点混乱。

我有django-bower安装并配置为正常运行。在加入基础应用程序配置并运行manage.py bower_install之后，我可以看到基础文件确实已经正确安装。我也可以使用静态标签将JS加载到模板中，而不会出现问题，所以我觉得我大约在一半。

我的问题是关于如何实际使用我的自定义SASS文件安装的基础文件，以及将这些SASS文件编译成CSS的最佳方式。我知道我应该能够通过@include“基础”将基础包含在我的SASS中，但是我失去了如何让SASS文件“看到”组件中的基础文件/ bower_components / foundation / sass以及如何设置一个编译将css放入正确的静态文件中。

更新：
PyCharm有一个选项来观看sass文件并编译它们，所以我现在有一个编译文件的选项，但是当我尝试导入基础时，我收到错误blog3.sass(第1行：文件导入未找到或不可读：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',)

解决方法

解决方案没有PYCHARM WATCHER

>不使用pycharm观察者。
> django-compressor编译包含compass的scss文件。
> django-bower

这是django-compression的“如何编译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 %}

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

</head>

希望这能帮助你。

编辑

也许这是一个更好的配置来使用@import没有亲戚的路径。
我认为：

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

现在app.scss：

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

使用PYCHARM手表

最近我很欣赏pycharm观察者

>安装django-bower
>从pycharm首选项添加SCSS监视器
>在编辑观察者，进入“参数”字段我设置：

–compass -I“/ $ ProjectFileDir $ / components / bower_components / foundation / scss”–no-cache –update $ FileName $：$ FileNameWithoutExtension $ .css

所以，在scss文件中：

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

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

解决方法

相关文章