それらの相対的な輸入に係る相対的なCSSのURLのをリベース

Question

I次の内容のSASSファイルのスタイル/ app.scss持っている：私は「../scripts/jspm_packages/とapp.css境界ファイルを生成したい

@import '../scripts/jspm_packages/npm/font-awesome@4.6.1/scss/font-awesome'; 
@import '../scripts/jspm_packages/npm/jquery-ui@1.10.5/themes/base/jquery-ui.css'; 

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

npm/font-awesome@4.6.1/scss/font-awesome 'and' ../scripts/jspm_packages/npm/jquery-ui@1.10.5/themes/base/jquery-ui.css、これは問題ではありませんしかし、私はこのファイルのurlをこのファイルパスとdist.cdに配置されるdist dirへの相対パスにリベースする必要があります。

font-awesome.sassには、url（ '../ fonts/somefont.ttf'）やjquery-ui.cssのようなフォントへのパスがあります。したがって、インポートされたファイルに相対的なインポートと相対的なURLがあります。

私が持っているので、場合：

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

そして、私はそう上のURL（ '../フォント/ somefont.ttf'）のようなapp.cssのパスとを取得したい。..

I多くのgulpプラグインを試しましたが、インポートされたファイルに相対URLを再配置しません。

あなたは私を助けることができます。それを達成する方法、または私が期待どおりにこれを動作させるために私のプロジェクトで何かを変えなければならないかもしれません。

ありがとうございます！

Answer 1

今日はあなたが必要とする正確に何をNPMパッケージを発表：css-source-map-rebase

私は比較的彼らはから輸入されたファイルをCSSで資産をリベースする唯一の信頼できる方法がであることが多くの試行錯誤の後に発見そのソースマップを使用してください。ソースマップの目的は、実際には、生成されたファイル（CSS）の行/列のペアとソースファイルの行/列のペア（SASS、LESS）の間のマッピングを維持することです。そのことを理解すれば、参照されたソースファイルに対してアセットをリベースするモジュールを作成することはかなり簡単です。

私が書いたnpmパッケージは基本的に、ソースマップをパラメータとして取り、CSSファイルを消費し、資産をリベースしていくつかのCSSを返すノードストリームです。以下のソースの場合

...

entry.scss

@import "partial/bar.scss"; 

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

部分/ bar.scss

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

...結果のCSSは次のようになります。

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

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

お気軽にお問い合わせください助けが必要な場合は私に連絡してください。 GitHubリポジトリの問題を開いたり、ここで質問したりできます。

EDIT：リポジトリURLがnpmで悪いことが判明しました。ここは：https://github.com/ericmorand/css-source-map-rebaseです。私は数分で解決します。