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

内森·考克斯(Nathan Cox)

我正在使用Django-Bower测试Foundation 5的SASS实现。我对Bower的想法是陌生的,并且对如何使此设置正常工作感到有些困惑。

我已经安装了django-bower并将其配置为可以正常运行。将基础添加到Bower应用程序配置并运行后,manage.py bower_install我可以看到基础文件确实已正确安装。我还可以使用static标签将JS加载到模板中而不会出现问题,所以我感觉到了一半。

我的问题是关于如何实际使用随我的自定义SASS文件安装的bower的基础文件,以及将这些SASS文件编译为CSS的最佳方法。我知道我应该能够将基础包括在我的SASS中,@include "foundation"但是我对如何获取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',
)
格里尼奥

没有PYCHARM WATCHER的解决方案

  1. 不使用pycharm watcher。
  2. django-compressor可以编译包括指南针在内的scss文件
  3. django-bower

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

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。-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 watcher

  1. 安装django-bower

  2. 从pycharm首选项添加SCSS Watcher

  3. 在监视程序的编辑中,将“参数”字段设置为:

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

因此,在scss文件中:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Django中集成Foundation 5

来自分类Dev

如何在Bower / Grunt中明确包含Foundation 5子脚本?

来自分类Dev

Rails 5:资产+ Bower + Bootstrap Sass

来自分类Dev

如何在Compass + SASS中使用Foundation 5?

来自分类Dev

如何在Django Zurb Foundation中使用SASS / SCSS?

来自分类Dev

使用Compass的Foundation 5的SASS / CSS问题

来自分类Dev

用Sass定制Foundation 5顶栏

来自分类Dev

如何配置 Django 以查看正确的 Sass 安装?

来自分类Dev

Django Bower 安装 Virtualenv

来自分类Dev

如何将RxJS 5添加为Bower依赖项

来自分类Dev

Bower配置使用svn

来自分类Dev

如何使Foundation 5顶部栏子菜单内联?

来自分类Dev

如何使用Foundation 5 Zurb设置输入元素的宽度

来自分类Dev

Zurb Foundation 5,如何使用罗盘升级javascript?

来自分类Dev

“ bower install foundation”和“ foundation new MY_PROJECT”有什么区别?

来自分类Dev

如何使用Bower,Gulp和Elixir在Laravel 5中安装引导程序?

来自分类Dev

Foundation中的SASS设置

来自分类Dev

SASS的Foundation 5网格不起作用-所有列全宽

来自分类Dev

Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

来自分类Dev

Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

来自分类Dev

Rails 4 + bower-rails gem + bower + bootstrap sass

来自分类Dev

Bower配置覆盖设置被忽略

来自分类Dev

使用Bower覆盖Middleman中的SASS变量

来自分类Dev

如何:用Bower更新Fontawesome

来自分类Dev

如何验证bower.json?

来自分类Dev

Django在添加django-bower后在CI上测试失败

来自分类Dev

Django在添加django-bower后在CI上测试失败

来自分类Dev

如何在全屏Zurb Foundation 4/5中进行行显示?

来自分类Dev

如何更改Foundation 5 <select>下拉三角形的颜色

Related 相关文章

  1. 1

    如何在Django中集成Foundation 5

  2. 2

    如何在Bower / Grunt中明确包含Foundation 5子脚本?

  3. 3

    Rails 5:资产+ Bower + Bootstrap Sass

  4. 4

    如何在Compass + SASS中使用Foundation 5?

  5. 5

    如何在Django Zurb Foundation中使用SASS / SCSS?

  6. 6

    使用Compass的Foundation 5的SASS / CSS问题

  7. 7

    用Sass定制Foundation 5顶栏

  8. 8

    如何配置 Django 以查看正确的 Sass 安装?

  9. 9

    Django Bower 安装 Virtualenv

  10. 10

    如何将RxJS 5添加为Bower依赖项

  11. 11

    Bower配置使用svn

  12. 12

    如何使Foundation 5顶部栏子菜单内联?

  13. 13

    如何使用Foundation 5 Zurb设置输入元素的宽度

  14. 14

    Zurb Foundation 5,如何使用罗盘升级javascript?

  15. 15

    “ bower install foundation”和“ foundation new MY_PROJECT”有什么区别?

  16. 16

    如何使用Bower,Gulp和Elixir在Laravel 5中安装引导程序?

  17. 17

    Foundation中的SASS设置

  18. 18

    SASS的Foundation 5网格不起作用-所有列全宽

  19. 19

    Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

  20. 20

    Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

  21. 21

    Rails 4 + bower-rails gem + bower + bootstrap sass

  22. 22

    Bower配置覆盖设置被忽略

  23. 23

    使用Bower覆盖Middleman中的SASS变量

  24. 24

    如何:用Bower更新Fontawesome

  25. 25

    如何验证bower.json?

  26. 26

    Django在添加django-bower后在CI上测试失败

  27. 27

    Django在添加django-bower后在CI上测试失败

  28. 28

    如何在全屏Zurb Foundation 4/5中进行行显示?

  29. 29

    如何更改Foundation 5 <select>下拉三角形的颜色

热门标签

归档