CODEWITHSUNDEEP
zurb-foundationmezzaninedjango-compressor
majdal
majdal

Reputation: 475

Making a Zurb Foundation theme for Mezzanine (django-compressor + SASS integration)

I'm building a bilingual site, which has both RTL and LRT content. Mezzanine comes with a twitter-bootstrap theme, which doesn't support RTL as well as zurb-foundation does. So I'm trying to create a new Mezzanine theme that would use foundation for sites.

I'm having trouble structuring my project in a way that django-compressor would understand, with minimal 3rd party dependencies.

The structure that I'd like to emulate is the one in mezzanine-themes. However, it is not setup to use SCSS. I've also installed django-compressor-toolkit to deal with SCSS.

The problem now is that I don't know how to structure the static files in the theme app to get compressor to find them.

My hunch is that I have to make compressor-toolkit find the foundation-sites file in node_modules, but I can't figure how to do that out from reading the docs.

I could put all of the foundation files in the same static folder, but then I lose the nice package management (along with other drawbacks).

Any recommendations?

Many thanks in advance.

Below is the error that compressor gives when it reaches the {% compress css %} template tag. 

{
  "status": 1,
  "file": "/Users/majdal/Projects/dar/nimer/static/scss/_settings.scss",
  "line": 63,
  "column": 1,
  "message": "File to import not found or unreadable: util/util.\nParent style sheet: /Users/majdal/Projects/dar/nimer/static/scss/_settings.scss",
  "formatted": "Error: File to import not found or unreadable: util/util.\n       Parent style sheet: /Users/majdal/Projects/dar/nimer/static/scss/_settings.scss\n        on line 63 of nimer/static/scss/_settings.scss\n>> @import 'util/util';\n   ^\n"
}

Upvotes: 1

Views: 120

Answers (1)

majdal
majdal

Reputation: 475

Found it! I had to use --include-path for the node-sass module. 

COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'node-sass --scss  --include-path ./node_modules/foundation-sites/scss/ --include-path ./node_modules/motion-ui {infile} {outfile}'),
)

Upvotes: 1

Related Questions