Django-Bower + Foundation 5 + SASS，如何配置？

Posted 2023-03-06

【中文标题】Django-Bower + Foundation 5 + SASS，如何配置？

【英文标题】：Django-Bower + Foundation 5 + SASS, How to configure?

【发布时间】：2013-12-31 19:41:08

【问题描述】：

我正在使用 Django-Bower 测试 Foundation 5 的 SASS 实现。我对 Bower 的想法很陌生，对于如何让这个设置正常工作有点困惑。

我已经安装并配置了 django-bower 以正常运行。在我将基础添加到 Bower 应用程序配置并运行 manage.py bower_install 后，我可以看到基础文件确实已正确安装。我也可以使用静态标签将 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',
)

【参考方案1】：

没有 PYCHARM WATCHER 的解决方案

不使用 pycharm watcher。 django-compressor编译scss文件包括compass。 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/'

模板.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 观察者

最近我很欣赏 pycharm watcher

安装 django-bower

从 pycharm 首选项添加一个 SCSS 观察者

在观察者的编辑中，进入我设置的“参数”字段：

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

所以，在 scss 文件中：

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

【讨论】：

太棒了，这是一个完全可以接受的解决方案。我打算使用 django 的 compass 包，但这是一个更好的解决方案，因为它允许我简单地即时编译文件，而无需运行 compass watcher。我希望我可以独立于 COMPRESS_PRECOMPILERS 变量指定指南针设置（我确信这是可能的，我只是不知道如何）。另外，额外+1，因为看起来我也可以用它来编译coffeescript。

我喜欢 django-compressor！

另外请注意，您可以将多个 -I 用于加载路径。 -I <path1> -I <path2>

【参考方案2】：

包：

django 管道 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' %

这将在developemnt上编译，在collectstatic上将编译和压缩

【讨论】：

感谢您抽出宝贵时间回答，但是我不喜欢管道如何自动将您的工作目录设置为正在执行的文件（django-pipeline github 已确认这是一个问题）和决定改用压缩机。

这里是与 Nathan Cox 上面所说的内容相关的 django-pipeline 问题：github.com/cyberdelia/django-pipeline/issues/294