Django-Bower + Foundation 5+ SASS，如何配置？
我正在使用Django-Bower测试Foundation 5的SASS实现。我对Bower的概念还是个新手，对于如何让这个设置正常工作，我有点困惑。
我已经安装了django-bower，并将其配置为正常运行。在我将foundation添加到bower apps配置中并运行manage.py bower_install之后，我可以看到foundation文件确实已经正确安装。我还可以使用静态标记将JS加载到模板中而不会出现问题，因此我感觉自己已经完成了一半。
我的问题是如何实际使用bower安装在我的自定义SASS文件中的基础文件，以及将这些SASS文件编译成CSS的最佳方法。我知道我应该能够使用@include "foundation"将基础包含到我的SASS中，但是我不知道如何让SASS文件“看到”components/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',
)回答 2
Stack Overflow用户
发布于 2013-12-13 16:43:55
没有PYCHARM观察器的解决方案
不使用pycharm watcher.
- django-bower
在内的
- 文件
这是一个“如何编译scss文件”的django-压缩器的例子：
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>希望这能对你有所帮助。
编辑
也许这是一个使用@import而不带相关路径的更好的配置。-I参数：
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观察器
最近我开始欣赏火线守望者
- 安装django-bower
- 从pycharm首选项
添加SCSS监视器
- 在watcher的编辑中，进入我设置的'Arguments‘字段：
-- $FileName$:$FileNameWithoutExtension$.css -I "/$ProjectFileDir$/components/bower_components/foundation/scss“--无缓存
因此，在scss文件中：
@import "foundation";
@import "compass";Stack Overflow用户
发布于 2014-01-29 11:38:47
包：
- django-pipeline
- django-bower
如何使用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' %}这将在开发时编译，并在集合静态上编译和压缩
https://stackoverflow.com/questions/20559698
复制相似问题
腾讯云开发者
