[Django]-Django-Bower + Foundation 5 + SASS, How to configure?

by

18👍

✅

SOLUTION WITHOUT PYCHARM WATCHER

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

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

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>

Hope this help you.

EDIT

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),
    )

Now app.scss:

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

USING PYCHARM WATCHER

Lately I’m appreciating pycharm watcher

  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

So, in the scss file:

@import "foundation";
@import "compass";
👤grigno

8👍

packages:

  1. django-pipeline
  2. django-bower

How to compile with 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',
)

Then in template:

{% load compressed %}
{% compressed_css 'application' %}

This will compile on developemnt and on collectstatic will compile and compress

👤carlitux

Leave a comment