django-compressor: immagini CSS con percorso relativo alla cartella

Question

Sto usando django-compresor per un'applicazione distribuita su heroku con Amazon S3 che serve file statici. Funziona tutto bene tranne che le immagini nel mio css di riferimento nell'immagine di sfondo: url() non sono visualizzate con il percorso corretto.

I miei file statici sono organizzati nel seguente struttura di directory:

-static 
    -myapp 
     -js 
     -css 
     -img 
    -bootstrap 
     -js 
     -css 
     -img 
    -othervendor 
     -js 
     -css 
     -img 

Pertanto, il percorso sto usando nella URL() è relativo al file css:

url("../img/icon.png") 

Tutto i miei file css vengono compressi e spostati nella cartella CACHE nella mia directory statica e l'url della directory CACHE viene visualizzato correttamente come:

Il problema è che le immagini nel file CSS url() sono resi come:

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png 

e dovrebbe essere:

https://mybucket.s3.amazonaws.com/static/myapp/img/imagefile.png 

o se le immagini sono state copiate nella cartella CACHE questo sarebbe lavoro:

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png 

la mia soluzione temporanea è quello di cambiare i percorsi delle immagini nella mia css al seguente e funziona:

url("/static/foldername/img/icon.png") 

Sono nuovo al compressore django & quindi non sono sicuro di quale dovrebbe essere il comportamento corretto, ma questo non sembra essere corretto. Il modo in cui lo vedo, il problema può essere risolto se riesco a ottenere compressore django per fare una delle due cose: 1) copiare tutte le immagini di riferimento in css url() alla directory CASHE/img OR 2) rendere l'url corretto rappresentato da ../ Ecco il mio setup:

I file css nel mio modello sono in un blocco {% compress css%}.

s3utils.py (usato per fare supporti separati e le directory statica nel mio secchio)

from storages.backends.s3boto import S3BotoStorage 

StaticS3BotoStorage = lambda: S3BotoStorage(location='static') 
StaticRootS3BotoStorage = lambda: S3BotoStorage(location='static') 
MediaS3BotoStorage = lambda: S3BotoStorage(location='media') 
MediaRootS3BotoStorage = lambda: S3BotoStorage(location='media') 

settings.py

DEFAULT_FILE_STORAGE = 'myapp.settings.s3utils.MediaRootS3BotoStorage' 
STATICFILES_STORAGE = 'myapp.settings.s3utils.StaticRootS3BotoStorage' 

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID') 
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY') 
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME') 

S3_URL = 'http://%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME 
MEDIA_URL = S3_URL+'media/' 
MEDIA_ROOT = S3_URL+'media/' 
STATIC_URL = S3_URL+'static/' 
STATIC_ROOT = S3_URL+'static/' 

COMPRESS_STORAGE = STATICFILES_STORAGE 
COMPRESS_URL = STATIC_URL 
COMPRESS_ROOT = STATIC_ROOT 

Im pensiero ci deve essere qualche impostazione che racconta del compressore per copiare css url ("../ img/image.png") alla directory CACHE/img ???

Answer 1

Ho avuto lo stesso problema!

per me Sembrava inizialmente che si trattasse di un problema con il compressore. Ho cambiato il mio prefisso S3Storage backend da

StaticS3Backend = lambda: S3BotoStorage(location='static') 

a

class StaticS3Backend(S3BotoStorage): 
    location = 'static' 

perché l'altro metodo di non impostare il destro Valore di posizione (E 'rimasto vuoto)

Questo risolto il problema per me.

Answer 2

Non ho trovato nessuna buona soluzione. Alcune buone discussioni qui https://github.com/jezdez/django_compressor/issues/226

Nel file CSS, utilizzare un percorso assoluto che punta all'url di immagine su Amazon S3 lo farà funzionare. Ma senza dire, questo è stupido. Perché dovrei volere che il mio ambiente di sviluppo e test locale utilizzi l'immagine di prod? Alcune volte, non è nemmeno accettabile. Di 'che vuoi cambiare l'immagine e testarla per un po'. (Puoi caricare manualmente la nuova immagine su s3 e modificare manualmente tutte le migliaia di riferimenti css a questa immagine nel nuovo URL. Ancora, stupido.)

Un modo leggermente migliore è usare {{STATIC_URL}} nel tuo css per costruire un percorso assoluto anziché un percorso relativo. Sì, puoi usare {{STATIC_URL}} se aggiungi compressor.filters.template.TemplateFilter menzionato qui https://django_compressor.readthedocs.org/en/1.3/settings/#base-settings. Questo risolve il problema di più fasi. Ma non funziona per lo sviluppo locale perché non stai comprimendo qui e se lo fai, avrai un debug difficile.

Personalmente mi sento di avere compressor.filters.template.TemplateFilter all'interno di django-compressor è sbagliato. Dovrebbe essere parte del django. Un processo facoltativo che puoi attivare per css e js.

Answer 3

Mi sono imbattuto in questo recentemente e risolto risolvendo il COMPRESS_OUTPUT_DIR = ''. Ciò ha comportato il salvataggio dei file compressi nella root statica anziché la directory predefinita 'CACHE' sotto static.