Bundle CSS/JS in un unico file in mvc quando si pubblica con l'opzione di release

Question

Ho creato un'applicazione MVC. Quando pubblico l'applicazione su Azure con l'opzione di rilascio, tutti i file css e js vengono caricati in un unico pacchetto nella pagina. (Apri vista sorgente della pagina quindi visualizza un singolo collegamento per css).

Quando pubblico un sito con l'opzione Debug nel profilo di pubblicazione, tutti i CSS caricano i singoli.

Il mio problema si verifica quando il sito di pubblicazione con il tema dell'opzione di rilascio non viene caricato correttamente, ma con il tema dell'opzione di debug viene caricato correttamente. Voglio pubblicare la mia domanda solo con l'opzione di rilascio. Se qualcuno dovesse affrontare questo problema prima e ottenere qualsiasi soluzione, per favore aiutatemi.

Answer 1

L'ho già riscontrato in precedenza quando si utilizza il raggruppamento.

Dire per esempio il file css si trova in: /Content/css/css.css

Questo file css fa poi un riferimento a un altro file, o per esempio un'immagine a /Content/images/image1.png via url('../images/image1.png').

Quindi si imposta il pacchetto css @/bundles/css.

Tutto sembra eccezionale in modalità di debug. Tuttavia, quando imposti <compilation debug="false" .... nel tuo web.config, improvvisamente i riferimenti fatti nel file css si interrompono. Se apri la tua console negli strumenti di sviluppo Firebug/Chrome e controlli le schede di rete, vedrai che le risorse non riescono a caricare, da un URL errato.

Ciò accade perché quando la modalità di debug è disattivata, tutti i file sono raggruppati e ridotti come se fossero in produzione. In questo caso, il file CSS verrà fornito in bundle e servito dall'URL /bundles/css. Ciò provoca l'interruzione del riferimento URL relativo. Dove faceva riferimento una volta a /Content/images/image1.png, ora fa riferimento a /images/image1.png.

avete alcune opzioni per risolvere questo:

1. servire il vostro file CSS in bundle dalla stessa cartella dei file CSS attuali. per esempio. /Content/css/cssbundle. Questo può diventare molto noioso rapidamente.
2. Cambia tutti i riferimenti relativi nei file css ai riferimenti assoluti. per esempio. ../images/image1.png diventerebbe /Content/images/image1.png. Ciò significa che non puoi usare molto CSS di terze parti in bundle, devi controllare/cambiare i riferimenti relativi se vuoi raggrupparli.
3. Utilizzare il pacchetto nuget BundleTransformer. Trasforma automaticamente gli url relativi in ​​assoluti durante il processo di raggruppamento.

   Le principali differenze delle classi StyleTransformer e ScriptTransformer da un implementazioni standard: possibilità di escludere le attività non necessarie quando si aggiunge beni da una directory, non produce la ri-minimizzazione di attività pre-minified, sostegno trasformazione automatica di relativa percorsi assoluti in CSS-code (usando UrlRewritingCssPostProcessor), ecc.

Personalmente raccomando 3 in quanto è il più facile da mantenere a lungo termine.