Django-Bower + Foundation 5 + SASS，如何配置？ [英] Django-Bower + Foundation 5 + SASS, How to configure?

问题描述

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

I'm in the process of testing out a SASS implementation of Foundation 5 using Django-Bower. I'm new to the idea of Bower and am having a bit of confusion as to how to get this setup working properly.

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

I have django-bower installed and configured to run properly. After I added foundation to the bower apps config and ran manage.py bower_install I can see that the foundation files have indeed been installed properly. I can also use the static tag to load the JS into a template without an issue, so I feel like I'm about halfway there.

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

My issue is in regards to how to actually use the foundation files that bower installed with my custom SASS files, and the best way to compile those SASS files into CSS. I know that I'm supposed to be able to include foundation into my SASS with @include "foundation" but I'm lost as to how to get the SASS file to "see" the foundation files in components/bower_components/foundation/sass and how to set up a compile to put the css into the correct static file.

更新：
PyCharm有一个选项来观看sass文件并编译它们，所以我现在有一个编译文件的选项，但是当我尝试导入基础时，我得到错误blog3.sass（第1行：导入文件未找到或不可读：基础。

以下是我的文件结构：

├── 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

This is my 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的解决方案

SOLUTION WITHOUT PYCHARM WATCHER

1. 不使用pycharm观察者。


2. django -compressor 来编译包含指南针的scss文件。


3. django-bower

1. Not using pycharm watcher.
2. django-compressor to compile scss files including compass.
3. django-bower

这是一个使用django-compression的如何编译scss文件的例子：

This is an example of "how to compile scss files" with django-compressor:

appName / static / scss / app.scss：

appName/static/scss/app.scss:

@import "../../../components/bower_components/foundation/scss/foundation";
@import "compass";

/* other stuff*/

settings.py：

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：

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>

希望这可以帮助你。

strong> 编辑

EDIT

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

Maybe this is a better config to use @import without relatives paths. -I arg:

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：

Now app.scss:

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

使用PYCHARM WATCHER

m欣赏pycharm观察者

USING PYCHARM WATCHER

Lately I'm appreciating pycharm watcher

1. 安装django-bower


2. 从pycharm首选项添加SCSS监视器
3. 
   

4. 在编辑观察者中，进入参数字段，我设置：

1. Install django-bower
2. Add a SCSS Watcher from pycharm preferences

3. In the edit of watcher, into 'Arguments' field I set:

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

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

所以，在scss文件中：

So, in the scss file:

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

这篇关于Django-Bower + Foundation 5 + SASS，如何配置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！