torchbox/django-libsass

Imported scss files are not compiled to css

kmazi opened this issue ยท 10 comments

kmazi commented

When using the compress tag to compile a main scss files, only scss codes written in the main file are compiled ignoring all imported scss files. I experienced this while importing zurb foundation 6 scss files to customize.

{% load static %}
    {% load compress %}
    {% compress css %}
    <link rel="stylesheet" href="{% static "homepage/css/custom.scss" %}" type="text/x-scss" media="screen">
    {% endcompress %}

In the above, custom.scss contains other scss files imported from foundation 6 css framework

Thanks for the report, @kmazi. @import lines are supported by this library (see https://github.com/torchbox/django-libsass#imports), so we'd need more detail to know what the issue is here.

Please can you provide a complete minimal example (including template and .scss files) that demonstrates the bug? That way we can see if this is a bug in django-libsass, or something peculiar to how Zurb Foundation is structured. (For example, see #2, where we were unable to support the Compass framework because it installed files in non-standard locations that can't be handled by Django.)

Confirm same problem. Just installed today with pip.

COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True
COMPRESS_PRECOMPILERS = ( 
   ('text/less', 'lessc --include-path=./shgp/static/css/ {infile} {outfile}'),
   ('text/x-scss', 'django_libsass.SassCompiler'),
   ('text/x-sass', 'django_libsass.SassCompiler'),
)
STATICFILES_FINDERS += ('compressor.finders.CompressorFinder',)
  {% compress css %}
      <link rel="stylesheet" type="text/x-scss" href="{% static "myapp/css/main.scss" %}" />
  {% endcompress %}

In fact, all scss is ignored and the file is just output with the new file extension in the static CACHE folder.

.foo {
  .bar {
    color:red;
  }
}
@import "../bootstrap-4.1.1/scss/_alert";

For me, the file is imported properly, it is just not watched by either compressor or libsass. For example, I can make a change to the imported file, reload the page, an no style has changed. However, if make a change main.scss which imports all my partials, then refresh the page, the change that I made in the imported file is visible. This appears to be an intermittent error, as it just started to not work this morning. @gasman , any suggestions? Thanks!

Same here its quite annoying. Also seeing some big slowdown on re-compilations. Sometimes it can take up to 30s for the css to change.

seeing the same issue over here...

I've added a test case in bbed4de to confirm that @import lines in scss are followed. In the absence of any end-to-end examples demonstrating this issue, I have no way to investigate this further, or determine whether the follow-up comments here are describing the same issue, so I'll close this as unable to reproduce.

It does get compile properly, bu i think the issue is nuanced. When you save or update the imported file, it does not re compile. which is what @thomashibbard seems to be experience. Not sure if @gasman bbed4de handles this test case.

@developerwok This sounds like a different problem to the original issue described here - the only similarity is that it involves an @import line.

If you can replicate this issue on a fresh project (ideally, a minimal example like hello-django-libsass), then please open a new issue for it, with full details of how to replicate it independently. Without this information, there's no way to know whether this is a genuine bug in django-libsass or a configuration / coding error. (For example: do you have a COMPRESS_CACHEABLE_PRECOMPILERS setting? This option is not valid for SASS.)

@gasman if I change anything in the imported scss file, it does not re compile. This is an issue and pain in the ass for developers. You should be able to reproduce that if you change anything inside an imported scss file.

@Saabbir I cloned the hello-django-libsass, changed something in the scss, reloaded the page and everything recompiled just fine.