Search code examples
pythondjangosasszurb-foundationdjango-pipeline

RuntimeError when building CSS from SCSS files of Foundation-sites with Django-pipeline


My issue is in the same context as Django-Bower + Foundation 5 + SASS. I'm trying to compile foundation from scss to css. The problem is that I'm encountering the following RuntimeError:

/home/hakim/.gem/ruby/2.4.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:287:in `watch_or_update': File /home/hakim/github/myquotes/static/quotes/app.css doesn't exist. (RuntimeError)
    Did you mean: sass --update /home/hakim/github/myquotes/static/quotes/app.scss:/home/hakim/github/myquotes/static/quotes/app.css
    from /home/hakim/.gem/ruby/2.4.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:51:in `process_result'
    from /home/hakim/.gem/ruby/2.4.0/gems/sass-3.4.23/lib/sass/exec/base.rb:52:in `parse'
    from /home/hakim/.gem/ruby/2.4.0/gems/sass-3.4.23/lib/sass/exec/base.rb:19:in `parse!'
    from /home/hakim/.gem/ruby/2.4.0/gems/sass-3.4.23/bin/sass:13:in `<top (required)>'
    from /home/hakim/.gem/ruby/2.4.0/bin/sass:22:in `load'
    from /home/hakim/.gem/ruby/2.4.0/bin/sass:22:in `<main>'

The static files are stored in os.path.join(BASE_DIR, 'static').

Here is the relevant part of my setting.py:

# Manage static files with pipeline 
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage' 

# Where to generate CSS from SCSS
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# Specify SCSS files to be compiled to CSS
PIPELINE = {
    'STYLESHEETS': {
        'librairies': {
            'source_filenames': (
                 'quotes/app.scss',
             ),
             'output_filename': 'quotes/app.css',
         },
     },
     'COMPILERS': (
         'pipeline.compilers.sass.SASSCompiler',
     ),
     'SASS_ARGUMENTS': "--trace --update -I '%s'" % os.path.join(
         BOWER_COMPONENTS_ROOT,
         'bower_components',
         'foundation',
         'scss'
    ),
}

app.scss contains only @import 'foundation';.


Solution

  • I managed to solve the problem above which was caused by me forgetting to consider the hierarchy of folders in app.scss (when importing foundation). By putting this file in /static with the downloaded foundation-sites and setting its content like below, I managed to make it work:

    @import 'foundation-sites/scss/settings/_settings.scss';
    @import 'foundation-sites/scss/foundation.scss';
    
    @include foundation-everything;