Il problema

Ho un sito Web di grandi dimensioni, quindi la mia struttura di cartelle CSS può essere piuttosto profonda. Qualsiasi file CSS può impostare l'immagine di sfondo di un elemento tramite relative URL. Prima di rilasciare ai miei server di produzione, ho bisogno di minimizzare tutti i file CSS. Questo processo di minificazione potrebbe interrompere alcuni degli URL relativi perché appiattisce la struttura delle cartelle in modo efficace. Come sviluppatore, come gestisci questa discrepanza tra lo sviluppo e il codice di produzione?Come gestire l'URL dell'immagine relativa che cambia quando il CSS viene ridotto?

Esempio

Questa è la mia struttura di cartelle:

image/ 
    article/ 
     brushStroke.jpg 
style/ 
    module/ 
     button.css 
    page/ 
     article/ 
      introToPainting.css 
    minified/ 
     style20130522.css

Durante lo sviluppo, io possa avere questa regola CSS in introToPainting.css:

#step1 { 
    background-image: url(../../../image/article/brushStroke.jpg); 
}

Diciamo che su un particolare pagina semplice, ho solo bisogno di button.css e introToPa inting.css. Per la versione di produzione, questi due file CSS verranno ridimensionati in style20130522.css. Ora che il file minifrato si trova in una profondità di cartella diversa da introToPainting.css, il percorso per brushStroke.jpg non è corretto.

http://scs.veetle.com/soget/session-thumbnails/5363e222d2e10/0eaf8f26f193375f97b7deeabae97016/5363e222d2e10_0eaf8f26f193375f97b7deeabae97016_20140509184555_536d84d367530_74_896x672.jpg

http://scs.veetle.com/soget/session-thumbnails/534711b951df7/60d40fd7ca34cf794237c5ec8cb4ff6d/534711b951df7_60d40fd7ca34cf794237c5ec8cb4ff6d_20140521112148_537ceebcd74e0_98_896x672.jpg

fonte

2013-05-22 Pwner

sì ... memorizza i file CSS da sviluppare nella stessa cartella relativa a quella a cui fare riferimento in produzione. o usare riferimenti assoluti. Non puoi avere un riferimento relativo, cambiare il posizionamento relativo e aspettarti che funzioni magicamente. – PlantTheIdea

Sì, sembra la scelta logica a meno che non si cambino tutti i percorsi dei file prima del lancio, anche se si ha cartella/cartella/css e si è minificato in cartella/cartella/min/i percorsi relativi sarebbero gli stessi – jamil

I can ' t usare un percorso assoluto. Lavoro in una squadra. L'ambiente di ogni sviluppatore può avere un URL di base diverso. – Pwner

mi sarebbe normalmente soddisfare questo lato server.

Ad esempio (utilizzando ASP.NET C#) generalmente aggiungere un baseUrl all'immagine e definire l'URL nello web.config.

Vorrei quindi utilizzare le versioni di debug o release di web.config per trasformare correttamente baseUrl.

Di conseguenza, i miei file HTML potrebbero avere parti o l'intero insieme degli URL costruiti lato server (o almeno avere il lato server aggiunto baseUrl) o potenzialmente lo baseUrl proiettato nel codice lato client, magari tramite Sessione o JavaScript.

EDIT: Per chiarire, non intendo qualcosa di simile impostazione http://mysite.com come baseurl, vorrei sostenere una cosa del genere ../../../image/ come il mio baseurl sviluppo e tradurre questo per /image/ in produzione, o qualcosa di simile

fonte

2013-05-22 19:17:16 dougajmcdonald

Un URL di base è inutile per un file CSS. L'URL nel file CSS è statico, quindi non può essere modificato (specialmente se si tratta di un plug-in di terze parti). Se i percorsi nei file CSS sono relativi alla posizione del file CSS e la minificazione modifica la posizione del file CSS senza aggiornare tali percorsi relativi, allora si tratta di un bug/svista nel processo di minificazione. – Triynko

Come gestire l'URL dell'immagine relativa che cambia quando il CSS viene ridotto?

Il problema

Esempio

risposta

Problemi correlati