我有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观察者。
> 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";