相对于相对css url的相对导入重新设置

Question

I have sass file styles/app.scss with following content:

@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';

I want to generate app.css boundary file with '../scripts/jspm_packages/npm/font-awesome@4.6.1/scss/font-awesome' and '../scripts/jspm_packages/npm/jquery-ui@1.10.5/themes/base/jquery-ui.css included, it's not a problem, but I want url's in this files be rebased relatively to this files paths and some path to dist dir, where app.css will be placed.

font-awesome.sass has paths to fonts like url('../fonts/somefont.ttf') as well as jquery-ui.css. So we have relative imports and relative url in imported files.

So if I have:

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

And I want to get paths in app.css like url('../fonts/somefont.ttf') and so on..

I tried a lot of gulp plugins but they don't rebase relative url's in imported files.

May be You can help me. How to achieve that, or may be I have to change something in my project to get this to work as expected.

Thanks!

Answer 1

I published today a npm package that does exactly what you need: css-source-map-rebase

I discovered after many trials and errors that the only reliable way to rebase assets in a CSS relatively to the file they were imported from is to use its source maps. If you think about it it makes sense: the purpose of source maps is actually to maintain a mapping between a line/column pair in the generated file (CSS) and a line/column pair in the source file (SASS, LESS). Once you understand that, writing a module that rebases assets relatively to the source file where they were referenced is pretty much trivial.

The npm package I wrote is basically a node stream that take a source map as parameter, consume CSS files and return some CSS with assets rebased.

For the following sources...

entry.scss

@import "partial/bar.scss";

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

partial/bar.scss

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

...the resulting CSS would be:

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

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

Don't hesitate to come back to me if you need some help. By opening issues on the GitHub repository or asking here.

EDIT: I just discovered that the repository URL was bad in npm. Here it is: https://github.com/ericmorand/css-source-map-rebase . I'll fix in a few minutes.