rebase relativen CSS-URLs in Bezug auf ihre relative Importe

Ich habe sass Datei styles/app.scss mit folgendem Inhalt:rebase relativen CSS-URLs in Bezug auf ihre relative Importe

@import '../scripts/jspm_packages/npm/[email protected]/scss/font-awesome'; 
@import '../scripts/jspm_packages/npm/[email protected]/themes/base/jquery-ui.css'; 

@import 'components/base'; 
@import 'components/cart'; 
@import 'components/category'; 
@import 'components/dialog'; 
@import 'components/form';

I app.css Grenzdatei mit‘../scripts/jspm_packages/ generieren möchten npm/[email protected]/scss/font-awesome ‚und‘ ../scripts/jspm_packages/npm/[email protected]/themes/base/jquery-ui.css enthalten, dann ist es kein Problem, , aber ich möchte URLs in diesen Dateien relativ zu diesen Dateien Pfade und einige Pfade zu dist dir, wo app.css platziert werden.

font-awesome.sass hat Pfade zu Schriftarten wie url ('../ fonts/somefont.ttf') sowie jquery-ui.css. Daher haben wir relative Importe und relative URLs in importierten Dateien.

Also, wenn ich habe:

dist/ 
    styles/ 
    app.css 
    fonts/ 
    'here I want to place all awesome fonts' 
    images/ 
    'here I want to place all images'

Und ich will Pfade in app.css wie URL erhalten ('../ fonts/somefont.ttf') und so weiter ..

I Probieren Sie viele Schluck-Plugins aus, aber sie relabieren relative URLs nicht in importierten Dateien.

Mai werden Sie mir helfen können. Wie kann ich das erreichen oder muss ich etwas in meinem Projekt ändern, damit dies wie erwartet funktioniert?

Danke!

Quelle

2016-05-03 sector119

Haben Sie http://clubmate.fi/import-and-globbing-in-sass/ gesehen? Auch können Sie nicht nur includePaths in Ihrem Schluck sass Aufgabe verwenden, oder nur eine benutzerdefinierte Schriftart erstellen super scss-Datei, die nur Schriftarten wie nur '/ fonts/.. hätte. – kasperoo

Vielen Dank für Ihre Antwort. Ich habe diesen Artikel nie gelesen. Aber ich habe keine Probleme mit Importen.Ich möchte URLs sofort in importierte Kreditordateien umbuchen und diese Assets in mein Assets-Verzeichnis kopieren. Ich kann meine eigene scss-Datei erstellen, aber ich möchte, dass die des Verkäufers nicht veraltet ist, während ich die PKGs des Anbieters aktualisiere – sector119

I veröffentlicht heute ein npm Paket, das genau das tut, was Sie brauchen: css-source-map-rebase

ich nach vielen Versuchen entdeckt und Fehler, dass die einzige zuverlässige Möglichkeit, Vermögenswerte in einem CSS relativ zu der Datei rebase sie von importiert wurden Verwenden Sie seine Quellkarten. Wenn man darüber nachdenkt, macht es Sinn: der Zweck der Quelle Karten tatsächlich ist eine Zuordnung zwischen einer Zeile/Spalte Paar in der generierten Datei (CSS) und eine Zeile/Spalte Paar in der Quelldatei (SASS, LESS) zu halten. Sobald Sie das verstanden haben, ist es ziemlich trivial, ein Modul zu schreiben, das Assets relativ zu der Quelldatei referenziert, auf die sie referenziert wurden.

Das npm Paket ich geschrieben habe, ist im Grunde ein Knoten Strom, der eine Quelle Map als Parameter übernehmen, verbrauchen CSS-Dateien und einige CSS mit einem Vermögen umbasiert zurückzukehren.

Für folgende Quellen ...

entry.scss

@import "partial/bar.scss"; 

.foo { 
    background: url('./foo.png'); 
}

Teil/bar.scss

.bar { 
    background: url('./bar.png'); 
}

... würde das resultierende CSS sein:

.bar { 
    background: url('partial/bar.png'); 
} 

.foo { 
    background: url('foo.png'); 
}

zögern Sie nicht, kommen zurück zu mir, wenn du Hilfe brauchst. Durch Öffnen von Problemen im GitHub-Repository oder Fragen hier.

EDIT: Ich habe gerade entdeckt, dass die Repository-URL in npm schlecht war. Hier ist es: https://github.com/ericmorand/css-source-map-rebase. Ich werde in ein paar Minuten reparieren.

Quelle

2017-04-03 19:13:27

rebase relativen CSS-URLs in Bezug auf ihre relative Importe

Antwort

Verwandte Themen