Elementi essenziali del Web che modificano i percorsi relativi in ​​CSS compilati

Question

Sto utilizzando Web Essentials 2013 in un progetto per compilare meno css su build/save. Tuttavia, sto avendo problemi con quella durante la compilazione, WE è manomissione i percorsi relativi ai font/immagini ecc

Ad esempio:

.footer { 
    background: url('../img/footer_background.svg') no-repeat top center; 
} 

diventa:

.footer { 
    background: url('img/footer_background.svg') no-repeat top center; 
} 

ricordo avere un problema simillare prima, ma le impostazioni "Regola percorsi relativi" su false nel web essentials Le opzioni CSS l'hanno risolto quindi. Non sembra farlo ora. Ho provato sia l'ultima stalla che l'ultima notte, dando entrambi lo stesso comportamento.

Qualche suggerimento? :)

Answer 1

Uso anche Web Essentials per LESS e, anche se non l'ho visto, ho una soluzione migliore per voi. Piuttosto che scrivere percorsi nel tuo codice, specialmente se tutto quello che stai cambiando è solo il nome del file alla fine, prova a utilizzare una variabile per i tuoi percorsi. Esempio:

@imgURL: "../img"; 

Poi da usare, tutto ciò che serve è:

.footer{ 
background: url("@{imgURL}/footer_background.svg"); 
} 

Answer 2

sto sperimentando questo stesso problema con il bootstrap, che utilizza i percorsi relativi per i font. Credo che il problema si trovi con node-sass o libsass.

Tuttavia, non sono riuscito a trovare le informazioni sulle riscritture del percorso relativo in entrambe le librerie. Se può essere riparato, una correzione potrebbe essere quella di rilasciare una nuova versione di nodo-sass.

Sfortunatamente, non riesco a trovare dove WebEssentials è installato sul mio sistema per testarlo.

Ho appena realizzato che si verificano problemi con il compilatore LESS, non con SASS. Mi chiedo se il problema abbia più a che fare con il minificatore CSS ora.

Ho modificato la mia "Directory di output personalizzata" in "../", che è dove voglio che scriva. Questo causa la riscrittura. Se lo lascio vuoto, i percorsi relativi vengono lasciati in pace.

Answer 3

Ho incontrato anche questo. Ha avuto un problema nelle versioni precedenti di Web Essentials, ma alla fine è stato risolto. Ora sembra essersi ritagliato nel 2013.

Un modo che ho visto per risolvere questo problema è di evitare il percorso dell'URL, che fa sì che meno compilatore tratti il ​​valore come stringa letterale, che passa attraverso così com'è senza toccarlo.

ex: background-image: ~ "url ('../../../ img/foo.png')";

emetterà come: background-image: url ('../../../ img/foo.png');

Answer 4

So che hai menzionato il 2013, ma ho avuto lo stesso problema nel 2015 e ho trovato se ho impostato "relativeUrls": false in compilerconfig.json.defaults quindi il problema citato si interrompe. Per riferimento sto usando VS 2015 Pro upd2 e estensione Web Compiler v1.11.315.

Answer 5

Nel caso in cui qualcuno ancora si imbattesse in questo, nel proprio bundleconfig.JSON aggiungere la chiave adjustRelativePaths alle opzioni minification come segue:

"minify": { "enabled": true, "adjustRelativePaths": false }

Questo tasto viene utilizzato nella classe statica BundleHandlerhere, guarda il metodo AdjustRelativePaths.